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!
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!
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.
36,263Members
Resources
Was this page helpful?
