0

I cannot understand the reason, but checking in chrome, it seems like using the :not selector is not working with a tag. Does anyone understand the reason?

Here is an example codepen: https://codepen.io/anon/pen/PQezVB

:not(a){
   color:blue;
}
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
tomermes
  • 22,950
  • 16
  • 43
  • 67
  • see the codepen, it doesn't work – tomermes Feb 21 '18 at 06:44
  • The reason is covered [here](https://stackoverflow.com/questions/20869061/is-the-css-not-selector-supposed-to-work-with-distant-descendants), and these are fundamentally the same thing, but I'm hesitant to mark this as a duplicate since it doesn't involve a descendant combinator. – BoltClock Feb 21 '18 at 06:46

4 Answers4

0

Found a solution, it should be used like this:

p {
    color: initial;
}

:not(p) {
    color: green;
}

https://codepen.io/anon/pen/XZqKwd

tomermes
  • 22,950
  • 16
  • 43
  • 67
0

The :not(selector) selector matches every element that is NOT the specified element/selector. The :not() CSS pseudo-class represents elements that do not match a list of selectors. Since it prevents specific items from being selected, it is known as the negation pseudo-class.

So to use it you should specify the css of the element that is then use not for those how don't

*:not(a){
   color:blue;
}
* {
  color:black;
}
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<span>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</span>
<i>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</i>
<h1>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h1>
<a>This is the link "a tag"</a>
M0ns1f
  • 2,705
  • 3
  • 15
  • 25
0

Found the solution here: Is the CSS :not() selector supposed to work with distant descendants?

Basically by selecting everything but the element you also select its parent elements and hence it's colored as well from inheritance.

:not(a) { color: red; }

in this case is almost equivalent to:

* { color: red; } /* includes "body" element etc. */
a { color: inherit; }
Hubert Grzeskowiak
  • 15,137
  • 5
  • 57
  • 74
  • 2
    That's why I'm thinking this is a duplicate, even if it doesn't necessarily involve the descendant combinator. There doesn't appear to be any good way to phrase this generally in a question, though. – BoltClock Feb 21 '18 at 06:53
-2

Adding "href" attribute to the anchor tag seems to solve this issue.

<p>Hello world</p>
<a href="">Some link</a>
Kartik Gurjar
  • 5
  • 3