Příklad: Selektor :not()

Stylový předpis této stránky obsahuje následující:

/* nemá třídu raz - tmavě zelená */
p:not(.raz) {
    color: #070;
}

/* nemá třídu raz nebo dva - tmavě modrá */
p:not(.raz, .dva) {
    color: #007;
}

/* není p - červená */
:not(p) {
    color: #b00;
}

Následující odstavce mají přiřazeny uvedené třídy.

Tento odstavec má přiřazenu třídu raz. Nevztahuje se na něj žádné z pravidel, proto zůstává černý. Název třídy raz je obalen prvkem <code>, na který se vztahuje třetí pravidlo. Proto je červený.

Tento odstavec má přiřazenu třídu dva. Vyhovuje prvnímu pravidlu, proto je tmavě zelený.

Tento odstavec má přiřazenu třídu tri. Vyhovuje prvnímu i druhému pravidlu, proto je tmavě modrý. Následující tři odstavce jsou vnořeny do prvku <blockquote>.

Tento odstavec má přiřazenu třídu raz. Opět se na něj nevztahuje žádné z pravidel, ale nachází se uvnitř prvku <blockquote>, který vyhovuje třetímu pravidlu. Zdědí od něj jeho červenou barvu.

Tento odstavec má přiřazenu třídu dva. Vyhovuje prvnímu pravidlu, proto je tmavě zelený.

Tento odstavec má přiřazenu třídu tri. Vyhovuje prvnímu i druhému pravidlu, proto je tmavě modrý.

Ostatní prvky na této stránce nemají žádné třídy. Jedná-li se o odstavce, vyhovují 1. a 2. pravidlu, takže jsou tmavě modré. Jiné prvky než <p> podléhají 3. pravidlu a jsou červené. To je i případ následujícího odkazu.

zpět: Selektor :not()