Using :NOT operator deeply nested within duplicate elements
Hi,
I am working with a 3rd party library (DevExpress) which creates some complex controls. In this case their Page control.
My problem is that one of our images, under a particular color scheme (DevExpress theme) doesn't look good because it is rendering navy blue on black.
Here's a screenshot:
https://www.screencast.com/t/seIZNs1N
And a mock-up of the relevant DOM starting from the page control's tab container, down to my target IMG:
div:BlackGlass --> ul --> li --> div --> ul --> li --> a --> img
So in my first attempt to fix this I did this:
css
Note above that I omitted the first UL LI and DIV elements. And the above selector does work. It finds my IMG and inverts the color.
Now the problem:
When the tab is Active, I do NOT want to do the inversion. So I modified my selector:
css
Above does NOT work. However, if I change my selector to contain all the elements between the top DIV and my bottom IMG it works as expected:
css
So my question is, is this a bug? Or am I not understanding how to use the :NOT operator correctly?
Clearly it is finding the first LI under the first UL and saying, nope this does not define the .dxtc-activetab class, hence we have a match. This feels like a Chrome/browser bug because it stopped looking within a given sub-branch of the DOM tree too early. It seems to only apply to the first element that matched - to which it did the :NOT comparison and concluded it did not exist so it gets selected.
To put that another way, the way it is behaving is what I would expect if I used the > immediate child operator. I dunno
cheers!
4 Replies
So... I have no explanation at the moment, but I was able to recreate it, and it's the same in Chromium, FF and Safari... so at least they're consistent 😅
My nesting was a little simpler than yours, but I was able to get around the issue by introducing a direct child combinator, so this might work:
Now, why that works... I'm not sure. Or why adding the string before the
:not works... I'm not sure.
I will see what I can find on this though, specially since it's consistent with all browsers, so it doesn't feel like a bugHi Kevin. You know me as LokiDaFerret on YouTube. In regards to above, I was intentionally keeping the selector as bland as I could since DevExpress could change their implementation. My original only specified the top DIV and bottom IMG, until I realised where they specified their "actibeTab" flag. But thank you for looking into it further. 👍
I'm still trying to figure this out 😂
I made a simple example, but figured out the issue there... might be more similar, here, but I don't think so...
Actually, with a fresh set of eyes on it this morning, it might have to do with specificity
Well your help is very much appreciated. You hover close to "god" status 😇 in my mind. 95% of what I know about CSS came from you. I look forward to the next YouTube video discussing :NOT() and specificity... 🤟 peace!