Pseudoklasa CSS :not()

Pseudoklasa CSS :not() (negacji) wybiera te elementy, które nie są reprezentowane przez listę selektorów prostych (rozdzielanych przecinkami), będącą jej argumentem, np.:

<style>
  p :not(span, em)
</style>
…
<p><span>Akapit</span> ciekawego <span>tekstu</span>, który <em>jest</em> <strong>ważny</strong>.</p>

Selektor użyty w tym przykładzie można odczytać tak: „W elemencie p wybierz wszystkie elementy, oprócz elementów span i em”. W efekcie tylko zawartość elementu strong będzie miała czerwony kolor.

Precyzja selektora :not()

Precyzja selektora pseudoklasy :not() jest taka sama, jak precyzja jej najbardziej precyzyjnego argumentu, np.:

<style>
  p :not(span) {color: red}
  div p em {color: green}
</style>
…
<div>
  <p>
    <span>Akapit</span> ciekawego <span>tekstu</span>, który <em>jest</em> <strong>ważny</strong>.
  </p>
</div>

W tym przypadku tekst znajdujący się w elemencie em będzie miał kolor zielony, ponieważ pierwszy selektor ma taką samą precyzję, jak selektor span. Teraz spójrz na poniższy przykład:

p :not(span, html body div p i) {color: red}
div p em {color: green}

Tutaj tekst znajdujący się w elemencie em w powyższym kodzie HTML będzie miał kolor czerwony, ponieważ pierwszy selektor ma taką samą precyzję, jak selektor html body div p i. Nie ma znaczenia, że na stronie nie występuje element pasujący do tego bardziej precyzyjnego selektora.

Składnia :not

Składnia pseudoklasy :not:

:not(lista selektorów rozdzielanych przecinkami) {...}

Pseudoklasa :not() jako argument przyjmuje tzw. niewybaczającą listę selektorów rozdzielonych przecinkami, tzn. jeśli którykolwiek z selektorów na tej liście jest nieprawidłowy, to cała lista zostaje uznana za nieprawidłową i zignorowana.

Zamiast listy selektorów można także użyć pseudoklasy :not() kilka razy, np.

:not(em, strong)
:not(em):not(strong)

Oba powyższe selektory są równoważne i wybierają wszystkie elementy oprócz elementów em i strong.