Negation pseudo-class selector [:not()] not working as expected

Question

In the following example, I’ll expect all p elements to render with a green background, since the red background should only be apply if the .red class is not a descendant of a .green class. Yet, this is not the case.

.green p {
  background: green;
}

:not(.green) .red > p {
  background: red;
}

<section class="green">
  <p>Neutrum vero, inquit ille. Et nemo nimium beatus est; Age, inquies, ista parva sunt. Haec para/doca illi..
    <p/>
    <div class="red">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Hoc enim constituto in philosophia constituta sunt omnia. Num quid tale Democritus..</p>
      <p>Zenonis est, inquam, hoc Stoici. Certe, nisi voluptatem tanti aestimaretis. Erat enim Polemonis. Tanta vis admonitionis inest in locis.</p>
      <p>Age sane, inquam. Omnis enim est natura diligens sui. Duo Reges: constructio interrete. Quid ergo attinet gloriose loqui.</p>
    </div>
    <p>Pro consul accusata id, errem nonumy assentior qui et. Quem albucius omittantur id sea, duo cu posse insolens.
      <p/>
</section>

Why the negation selector is not working as expected in this example?

:not(.green) will match anything so also and . If the second CSS rule was ":not(.green) > .red > p", all `
`s will have a green background. — KevSlashNull, Mar 15 '20 at 14:54

score 2 · Answer 1 · answered Mar 15 '20 at 14:50

2

You need to put a selector in front of the pseudo class e.g. in you case you want section:not(.green) .red > p a pseudo-class is a keyword added to a selector.

answered Mar 15 '20 at 14:50

Woody

7,578
2
21
25

I tried with the universal selector `*:not(.green) .red > p` and it does not work either. Any idea why? – VorganHaze Mar 15 '20 at 14:54
2

@VorganHaze the universal selector is implicit when you don't add it so `:not(.green)` is the same as `*:not(.green)` https://stackoverflow.com/a/60495422/8620333 – Temani Afif Mar 15 '20 at 14:58
I'm not actually sure, but it looks like this answer has some more information https://stackoverflow.com/questions/24794545/universal-selector-and-pseudo-elements – Woody Mar 15 '20 at 15:01

score 1 · Answer 2 · answered Mar 15 '20 at 14:54

You need to add root selector with not.

.green p {
  background: green;
}

root:not(.green) .red > p {
  background: red;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <section class="green">
  <p>Neutrum vero, inquit ille. Et nemo nimium beatus est; Age, inquies, ista parva sunt. Haec para/doca illi..
    <p/>
    <div class="red">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Hoc enim constituto in philosophia constituta sunt omnia. Num quid tale Democritus..</p>
      <p>Zenonis est, inquam, hoc Stoici. Certe, nisi voluptatem tanti aestimaretis. Erat enim Polemonis. Tanta vis admonitionis inest in locis.</p>
      <p>Age sane, inquam. Omnis enim est natura diligens sui. Duo Reges: constructio interrete. Quid ergo attinet gloriose loqui.</p>
    </div>
    <p>Pro consul accusata id, errem nonumy assentior qui et. Quem albucius omittantur id sea, duo cu posse insolens.
      <p/>
</section>
</body>
</html>

Negation pseudo-class selector [:not()] not working as expected

2 Answers2