This question already has an answer here:
- :not() selector not behaving the same between Safari and Chrome/Firefox 2 answers
I've been using the :not()
pseudo-class to style things without the need to override it with a second unnecessary declaration to undo the first one,
but now I came across a weird behaviour where Safari accepts descendant selectors within the :not()
, but Chrome doesn't.
I used something like a:not(.blue a)
.
I searched for answers, but I still don't fully understand the reason.
Are descendant selectors really allowed by the spec?
Here's a demo:
a:not(.blue a) {
color: red;
}
<div><a>this one should be in red</a></div>
<div class="blue"><a>this one shouldn't</a></div>
http://codepen.io/oscarmarcelo/pen/YqboQJ?editors=1100