Sélecteur :NOT
Rôle
Le sélecteur not est une pseudo-classe désigné par la syntaxe :not(selector) qui permet de cibler chaque élément n’étant pas celui qui est ciblé par le paramètre sélecteur.
Note: pour que le sélecteur :not(selector) fonctionne, c’est à dire pour cibler celui ou ceux qui ne sont pas la cible d’un sélecteur , il faut d’abord spécifier une feuille de style pour ce sélecteur.
Le paramètre sélecteur peut être :
– une balise simple [:not(p)]
p {
color: green;
}
/* les élements qui ne sont pas paragraphe */
:not(p) {
color: green;
}
– une class [:not(.bg)]
.bg {
color: red;
}
/* les élements qui ne sont pas ciblés par le selecteur de class .bg */
:not(.bg) {
color: green;
}
– une pseudo-classe [:not(:hover)]]
:hover{
color: red;
}
/* les élements qui ne sont pas survolés */
:not(hover) {
color: green;
}
Mais il ne peut pas être un selecteur ID, un sélecteur composé (descendant, enfant, contextuel). Il n’est pas possible aussi d’imbriquer les ‘not:’
Dans l’exemple ci-dessous, on spécifie que les éléments avec la classe ‘.toto’ doivent être rouges et que ceux qui n’ont pas la classe ‘.toto’ devront être verts.
.toto{
color: red;
}
:not(.toto) {
color: green;
}
<h1 class="toto">titre</h1>
<h2>Sous-titre</h2>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
Version : CSS3
Testez vous-même ce sélecteur
Compatibilité
Le sélecteur not est pris en charge par tous les principaux navigateurs
A partir d’Internet Explorer 9.
