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.