Sélecteur CSS :not

Au lieu d’utiliser 2 sélecteurs différents pour attribuer un style, puis un autre pour l’annuler. Utilisez le sélecteur :not pour sélectionner tous les éléments sauf ceux qui correspondent à l’argument que vous avez passé.

li {
  margin-left: 10px;
}

li:first-of-type {
  margin-left: 0;
}

/* Beaucoup mieux */

li:not(:first-of-type) {
  margin-left: 10px;
}

Arguments autorisés

Dans la version actuelle des sélecteurs CSS de niveau 3, vous ne pouvez passer que les arguments suivants sélecteur simple comme argument.

Sélecteurs simples :

• Sélecteur de type
• Sélecteur universel
• Sélecteur d’attributs
• Sélecteur de classe
• Sélecteur d’ID
• Pseudo-classe

/* Type */
h1 {}

/* Universal */
* {}

/* Attribute */
a[title] {}

/* Class */
.parent {}

/* ID */
#demo {}

/* Pseudo-class */
:first-child {}

Les versions de CSS expliquées brièvement

Tout comme JavaScript ou ECMAScript ont différentes versions. Les CSS ont également différentes versions. Cependant, contrairement à ECMAScript où tout est regroupé dans une seule et même catégorie (ES5, ES6, ES7), CSS fonctionne par morceaux.

Par exemple, il y a Sélecteurs CSS niveau 3, Grille CSS niveau 1et CSS Flexbox Niveau 1. Le site :not relève de la catégorie Sélecteurs CSS niveau 3 spécification. La prochaine sur laquelle le groupe de travail CSS travaille est… indice, ce qui vient après 3… ding ding, Sélecteurs CSS niveau 4

Rachel Andrew a écrit un article fantastique expliquant Niveaux CSS. J’ai également mis un lien vers ce document dans la section Ressources, alors lisez-le si vous êtes intéressé.

Passage d’une liste de sélecteurs

Dans la version actuelle, vous ne pouvez passer que des sélecteurs simples comme argument. Cependant, dans CSS Selectors Level 4, vous pourrez passer une liste de sélecteurs. C’est cool, non ?

/* CSS Selectors Level 3 */
p:not(:first-of-type):not(.special) {
}

/* CSS Selectors Level 4 */
p:not(:first-of-type, .special) {
}

Et voici ce qui sera sélectionné

<div>
  <p>1</p>
  <p>2</p><!-- selected -->
  <p>3</p><!-- selected -->
  <p class="special">4</p>
  <p>5</p><!-- selected -->
</div>

Imbrication des :not impossible

Une chose à souligner est que les négations ne peuvent pas être imbriquées. C’est donc un non-non :

:not(:not(...)) {
}

:first-child vs :first-of-type

Commençons par les définir individuellement :

:first-child sélectionne uniquement le premier élément SI celui-ci est le premier enfant de son parent. Cela signifie que si ce n’est pas le premier enfant du parent, rien ne sera sélectionné.

:first-of-type sélectionnera le premier élément du type que vous avez spécifié. Même s’il n’est pas le premier enfant de son parent. Ainsi, un résultat apparaîtra toujours si vous utilisez ce sélecteur (sauf si vous avez choisi un élément qui n’existe pas du tout).

Très bien, regardons quelques exemples.

Les enfants sont tous du même type

Comme les enfants sont tous du même type, le résultat est le même pour les deux.

<div>
  <p></p> <!-- p:first-child, p:first-of-type -->
  <p></p>
</div>

Les enfants sont de différents types

<div>
  <h1></h1>
  <p></p> <!-- p:first-of-type -->
  <p></p>
</div>

MAIS parce que p n’est plus le premier enfant. Si vous appelez p:first-child RIEN ne sera sélectionné.

<!-- ⚠️ p:first-child ➡️ no element selected -->
<div>
  <h1></h1>
  <p></p>
  <p></p>
</div>

Choisir le premier enfant

Vous vous demandez peut-être ce qui se passe si je ne me soucie pas du type et que je veux simplement sélectionner le premier enfant de son parent. Dans ce cas, vous pouvez faire ceci :

.parent :first-child {
  color: blue;
}

<div class="parent">
  <h1></h1><!-- selected -->
  <p></p>
  <p></p>
</div>

Autres pseudo-classes CSS similaires

Et cette compréhension s’applique aux autres classes cousines :

• :last-child et :last-of-type
• :nth-child et :nth-of-type
• :only-child et only-of-type

Support des navigateurs

Le sélecteur :not est pris en charge par la plupart des navigateurs modernes et par Internet Explorer 9 et plus.

Compatibilité des navigateurs