CSS3 :notSélecteurs

Manuel de référence complet des sélecteurs CSS

Définition et utilisation

Le sélecteur :not(selector) correspond à chaque élément qui n'est pas l'élément/sélecteur spécifié.

La pseudo-classe :not de CSS permet de sélectionner tous les éléments sauf le sélecteur spécifié. C'est un moyen d'appliquer des styles en excluant des éléments spécifiques.

Syntaxe de base

css
:not(selector) {
  /* 样式规则 */
}

• selector: C'est le sélecteur que vous souhaitez exclure.

1. Exclure les éléments d'un type spécifique

body :not(p) {
  color: blue;
}

Ce code va définir la couleur du texte en bleu pour tous les éléments à l'intérieur de l'élément body, à l'exception des éléments p.

2. Exclure les éléments avec une classe spécifique

div :not(.highlight) {
  background-color: gray;
}

Ce code va définir la couleur d'arrière-plan en gris pour tous les éléments à l'intérieur d'un élément div qui n'ont pas la classe highlight.

3. Exclure plusieurs sélecteurs

:not(div, span) {
  font-size: 14px;
}

Ce code va définir la taille de police sur 14 pixels pour tous les éléments de la page qui ne sont ni div ni span.

4. Exclure les pseudo-classes

a:not(:hover) {
  color: black;
}

Ce code va définir la couleur du texte en noir pour tous les liens qui ne sont pas dans un état hover.

5. Exclure les sélecteurs d'attribut

input:not([type="text"]) {
  border: none;
}

Ce code supprimera la bordure de tous les éléments input qui ne sont pas de type="text".

Remarque

• :notLes pseudo-classes font partie des sélecteurs CSS3 et sont largement prises en charge par les navigateurs.
• :notLes pseudo-classes peuvent améliorer la flexibilité du code CSS, ce qui vous permet de contrôler plus précisément l'application des styles.
• Vous pouvez:notDans les pseudo-classes, utilisez un sélecteur unique ou plusieurs sélecteurs séparés par des virgules.

Prise en charge des navigateurs

Les nombres dans le tableau indiquent le numéro de version du premier navigateur qui prend en charge le sélecteur.

Manuel de référence complet des sélecteurs CSS