:not()
Sélectionne les éléments qui ne correspondent à aucun des sélecteurs fournis, ni à aucun de la liste.
Exemple
#.btn:not(:disabled):hover {
background: #6d28d9;
}
.btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}<style>.btn { padding: 8px 14px; border: 0; border-radius: 8px; background: #7c3aed; color: #fff; font: inherit; cursor: pointer; }</style>
<div style="display: flex; gap: 8px;">
<button class="btn" type="button">Actif</button>
<button class="btn" type="button" disabled>Désactivé</button>
</div>Survolez les deux boutons. Le bouton désactivé ne change pas de couleur, car la règle de survol l’exclut.
Définition et utilisation
#La pseudo-classe :not() inverse une condition. li:not(.done) sélectionne les points de liste sans la classe done, et input:not([type="checkbox"]) tous les champs sauf les cases à cocher. Elle permet de styliser « tout sauf » sans écrire de règle qu’il faudra ensuite annuler.
Les navigateurs modernes acceptent dans la parenthèse une liste de sélecteurs, même complexes : :not(.a, .b) signifie « ni .a, ni .b », soit la même chose que :not(.a):not(.b). La liste ne pardonne pas les erreurs : un seul sélecteur invalide annule toute la règle. Les pseudo-éléments ne peuvent pas non plus figurer dans la parenthèse.
La spécificité de :not() est celle du sélecteur le plus fort de la liste, pas zéro. p:not(#intro) a donc un poids de (1, 0, 1). Méfiez-vous aussi d’un :not(p) isolé : il correspond à tout ce qui n’est pas un paragraphe, y compris html et body, donc mieux vaut le restreindre, par exemple .menu > :not(.active).
Syntaxe
#:not( <liste de sélecteurs> )Arguments
#- Chaque point sans la classe
done, y compris celui avec la classelocked. - Liste dans la parenthèse : ni
done, nilocked. Il reste deux points ordinaires. - Tous les points sauf le premier.
- Les points qui n’ont aucun attribut
class.
Arguments en pratique
#.done
done, y compris celui avec la classe locked.li:not(.done) { background: #7c3aed; color: #fff; }.done, .locked
done, ni locked. Il reste deux points ordinaires.li:not(.done, .locked) { background: #7c3aed; color: #fff; }:first-child
li:not(:first-child) { background: #7c3aed; color: #fff; }[class]
class.li:not([class]) { background: #7c3aed; color: #fff; }Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Plutôt que d’écrire une règle pour tous les éléments puis de l’annuler pour l’un d’eux, excluez-le directement avec
:not(). Le code est plus court et ne se contredit pas lui-même. - Surveillez le poids :
:not(#id)ajoute la spécificité d’un identifiant, bien qu’il ne sélectionne rien par cet identifiant. - Utilisez toujours un
:not()isolé avec un contexte, par exemple.lista > :not(.ukryty). Sans cela, la règle touchera aussihtml,bodyet d’autres éléments.
Entrées associées
#- :is()Fait correspondre l’élément à n’importe quel sélecteur de la liste. Raccourcit les longs sélecteurs répétitifs en une seule écriture.
- :where()Fonctionne comme :is(), mais a toujours une spécificité nulle. Idéale pour les styles de base, faciles à redéfinir.
- :has()Sélectionne un élément en fonction de ce qu’il contient ou de ce qui se trouve après lui. Permet de styliser un parent selon ses enfants.
- SpécificitéLe poids d’un sélecteur, qui détermine quelle règle gagne lorsque plusieurs règles définissent la même propriété du même élément.
- :first-childCorrespond à l’élément qui est le premier enfant de son parent.
- A, BLa virgule combine plusieurs sélecteurs en une seule règle, pour leur donner les mêmes styles sans répéter les déclarations.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.