Selektor :not()

Oficiálně představuje :not() pseudotřídu a jistě jste si domysleli, že znamená negaci. V jeho závorkách je obsažen další selektor a vyhoví mu prvky, které nevyhovují tomuto selektoru. Například selektoru p:not(.chyba) vyhoví všechny prvky <p>, které nemají přiřazenu třídu chyba.

Původně mohl obsahovat jen jeden selektor s dost omezeným sortimentem konstrukcí, ovšem specifikace Selectors Level 4 tato omezení uvolnila. Nyní může obsahovat čárkami oddělovaný seznam selektorů a vybere takové prvky, na které se nevztahuje žádný z nich. Stejně se chová, pokud použijete několik :not().

Podívejte se na příklad.

Pokud použijete :not() velmi obecně, snadno se může stát, že vybere víc prvků, než byste čekali. Například selektor :not(.třída) vybere všechny prvky, kterým není přiřazena daná třída. Mohou zahrnovat potomky a/nebo rodiče prvků s uvedenou třídou a výsledek vás může překvapit. Třeba v tomto příkladu to vypadá, že pravidlo se selektorem :not(.raz) vůbec nefunguje, protože odstavec s třídou raz je obarven, jako by ji neměl. Ve skutečnosti svou barvu zdědí od rodiče, který třídu nemá.

Proto doporučuji používat :not() jako doplněk konkrétního selektoru, abyste minimalizovali pravděpodobnost vzniku podobných překvapení.

Selektor uvnitř :not() je nezávislý na selektoru před dvojtečkou. Funguje to tak, že selektor před dvojtečkou vybere prvky, které mu vyhovují. (Pokud před dvojtečkou žádný selektor není, bere se to jako * a vybere tedy všechny prvky v dokumentu.) Selektor(y) uvnitř závorek vybere z dokumentu prvky, které mu nevyhovují. Pravidlo se pak uplatní na prvky, které jsou v obou těchto výběrech. Proto například:

code:not(h2 code) {
    color: #070;
}

obarví zeleně prvky <code>, které nejsou uvnitř nadpisů <h2>. Selektor před dvojtečkou vybere ze stránky všechny prvky <code>. :not() vybere všechny prvky na stránce kromě prvků <code>, které jsou potomky <h2>. Pouze prvky <code>, které nejsou uvnitř <h2> jsou v obou těchto skupinách.

V kombinaci s dalšími pokročilými selektory lze dosahovat zajímavých výsledků. Například pravidlo:

ul:not(:has(>li:nth-of-type(4))) {
    ...
}

bude uplatněno na seznamy s odrážkami <ul>, které mají nanejvýš 3 položky (neobsahují čtvrté dítě typu <li>). Ilustruje je další příklad.

A když přidáme navíc požadavek, aby existovala 3. položka, uplatní se pravidlo na seznamy, které mají právě 3 položky (existuje v nich třetí, ale neexistuje čtvrtá):

ul:has(>li:nth-of-type(3)):not(:has(>li:nth-of-type(4))) {
    ...
}