Exclure des classes de vos règles avec CSS3 :not()

Il vous est certainement arrivé de vouloir attribuer des styles à tous les sélecteurs identiques sauf pour un cas spécifique.Grâce aux nouveaux sélecteurs CSS3 c’est maintenant possible ! Et plus particulièrement avec celui-ci :

:not()

:not permet donc d’exclure un élément, ou l’état d’un élément, du sélecteur.

Comment l »appliquer dans votre CSS ?

Atteindre tous les éléments qui ont la classe .item, mais qui ne sont pas des <p>

.item:not(p){ ... }

Atteindre les éléments <li> non survolés :

ul li:not(:hover){ ... }

Atteindre les éléments <div> qui n »ont pas la classe .item :

div:not(.item){ ... }

Attention !

Seuls les sélecteurs et pseudo-classes simples sont autorisés. Ainsi, cet exemple n’est pas valide :

p:not(div p){ ... }