Docs CSS exécutables : Pseudo-classes CSS

Q: Comment fonctionne nth-child en CSS ?

:nth-child(an+b) cible les éléments dont la position parmi leurs frères vaut a×n+b pour n = 0, 1, 2 et ainsi de suite, en comptant à partir de 1. :nth-child(3) est le troisième enfant, :nth-child(odd) ou 2n+1 chaque enfant impair, et :nth-child(n+4) le quatrième et les suivants.

Q: Quelle est la différence entre nth-child et nth-of-type ?

:nth-child() compte tous les éléments frères, puis vérifie le reste du sélecteur ; :nth-of-type() ne compte que les frères du même type d'élément. Dans une liste formée d'un h2 suivi de paragraphes, p:nth-child(1) ne cible rien alors que p:nth-of-type(1) cible le premier paragraphe.

Q: Comment utiliser :not() en CSS ?

Mettez le sélecteur à exclure entre les parenthèses : li:not(.done) cible tous les éléments de liste sans la classe done. Il accepte aussi une liste, input:not([type="checkbox"], [type="radio"]).

Q: Quelle est la différence entre une pseudo-classe et un pseudo-élément ?

Une pseudo-classe (un seul deux-points, :hover) sélectionne un élément existant entier dans un certain état. Un pseudo-élément (deux fois deux-points, ::before) cible une partie d'un élément ou crée du contenu généré.

Ce qu'est une pseudo-classe

Une pseudo-classe est un mot-clé placé après deux-points, qui sélectionne des éléments selon leur position dans le document ou leur état. Vous l'accrochez à un sélecteur normal : li:first-child, input:focus, a:hover.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Pseudo-classes</title>
  <style>
    li { padding: 6px 10px; list-style: none; }
    li:nth-child(odd) { background: #e5e7eb; }       /* zebra stripes */
    li:first-child { font-weight: bold; }
    li:last-child { color: #2563eb; }
    li:not(.done) { border-inline-start: 4px solid #f59e0b; }
  </style>
</head>
<body>
  <ul>
    <li>First child: bold</li>
    <li class="done">Done: no amber edge</li>
    <li>Odd rows are gray</li>
    <li class="done">Done</li>
    <li>Last child: blue</li>
  </ul>
</body>
</html>

Les pseudo-classes d'état pour les liens et la souris (:hover, :active, :visited) ont leur propre page, hover en CSS.

:nth-child() et la formule an+b

:nth-child() accepte un nombre, un mot-clé ou une formule an+b. Le navigateur essaie n = 0, 1, 2, ... et cible chaque position produite par la formule (les positions commencent à 1).

Formule	Positions ciblées	Sens
`3`	3	Le troisième enfant
`odd` ou `2n+1`	1, 3, 5, ...	Lignes impaires
`even` ou `2n`	2, 4, 6, ...	Lignes paires
`3n`	3, 6, 9, ...	Un sur trois
`n+4`	4, 5, 6, ...	Le quatrième et les suivants
`-n+3`	1, 2, 3	Les trois premiers
`3n+1`	1, 4, 7, ...	Un sur trois, en partant du premier

Tapez une formule et regardez quels éléments sont ciblés :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>nth-child tester</title>
  <style>
    .grid { display: grid; grid-template-columns: repeat(6, 40px); gap: 6px; padding: 0; }
    .grid li {
      list-style: none;
      height: 40px;
      display: grid;
      place-items: center;
      background: #e5e7eb;
      border-radius: 6px;
    }
  </style>
  <style id="live"></style>
</head>
<body>
  <label>li:nth-child( <input id="f" value="3n+1" size="8"> )</label>
  <ul class="grid" id="grid"></ul>
  <script>
    const grid = document.getElementById('grid');
    for (let i = 1; i <= 18; i++) grid.innerHTML += '<li>' + i + '</li>';
    const input = document.getElementById('f');
    const update = () => {
      document.getElementById('live').textContent =
        '.grid li:nth-child(' + input.value + ') { background: #2563eb; color: white; }';
    };
    input.addEventListener('input', update);
    update();
  </script>
</body>
</html>

Essayez odd, even, 4, n+7, -n+5 et 2n+3. Une formule invalide ne cible rien.

Son jumeau qui compte depuis la fin est :nth-last-child() : li:nth-last-child(-n+2) sélectionne les deux derniers éléments.

nth-child ou nth-of-type

:nth-child() compte tous les éléments frères, quelle que soit leur balise, et ne vérifie qu'ensuite le reste du sélecteur. :nth-of-type() ne compte que les frères de la même balise. La différence apparaît dès que les frères sont mélangés :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>nth-of-type</title>
  <style>
    p, h2 { margin: 4px 0; padding: 4px 8px; }
    p:nth-child(2) { background: #f59e0b; }   /* 2nd child AND a p */
    p:nth-of-type(2) { color: #2563eb; font-weight: bold; } /* 2nd p */
  </style>
</head>
<body>
  <h2>Heading (child 1)</h2>
  <p>Paragraph 1, child 2: amber</p>
  <p>Paragraph 2, child 3: blue and bold</p>
  <p>Paragraph 3, child 4</p>
</body>
</html>

Les mêmes paires existent pour les extrémités : :first-child / :first-of-type, :last-child / :last-of-type, :only-child / :only-of-type.

:not(), :is() et :where()

Pseudo-classe	Exemple	Cible
`:not(X)`	`li:not(.done)`	Les éléments qui ne correspondent pas à X
`:is(X, Y)`	`:is(h1, h2, h3) a`	Les éléments qui correspondent à un élément de la liste
`:where(X, Y)`	`:where(ul, ol) li`	Comme `:is()`, avec une spécificité nulle
`:has(X)`	`li:has(> input:checked)`	Les éléments qui contiennent une correspondance de X

:not() est celle que l'on utilise tous les jours, par exemple pour placer un séparateur entre les éléments mais pas après le dernier :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>not</title>
  <style>
    .tags { padding: 0; }
    .tags li { display: inline; list-style: none; }
    .tags li:not(:last-child)::after { content: " · "; color: #2563eb; }
    input:not([type="checkbox"]) { border: 2px solid #16a34a; }
  </style>
</head>
<body>
  <ul class="tags"><li>html</li><li>css</li><li>js</li></ul>
  <input type="text" placeholder="Text: green border">
  <input type="checkbox" aria-label="Checkbox, default border">
</body>
</html>

Pseudo-classes d'état : focus, checked, disabled, invalid

Pseudo-classe	Cible
`:focus`	L'élément qui a le focus clavier ou souris
`:focus-visible`	Un élément qui a le focus, quand le navigateur juge qu'un contour doit s'afficher (en général au clavier)
`:focus-within`	Un élément qui contient l'élément ayant le focus
`:checked`	Une case à cocher ou un bouton radio coché, ou une `<option>` sélectionnée
`:disabled` / `:enabled`	Les contrôles de formulaire désactivés (ou non)
`:required` / `:optional`	Les champs avec ou sans `required`
`:invalid` / `:valid`	Les champs dont la valeur échoue ou réussit la validation
`:user-invalid`	Invalide, mais seulement après une interaction de l'utilisateur
`:placeholder-shown`	Un champ qui affiche actuellement son placeholder
`:empty`	Un élément sans enfant, pas même du texte
`:target`	L'élément dont l'id correspond au `#fragment` de l'URL

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>States</title>
  <style>
    input { padding: 6px; border: 2px solid #e5e7eb; border-radius: 6px; outline: none; }
    input:focus-visible { border-color: #2563eb; }
    input:user-invalid { border-color: #f59e0b; }
    .field:focus-within label { color: #2563eb; }
    input:checked + label { text-decoration: line-through; color: #16a34a; }
    button:disabled { opacity: 0.4; }
  </style>
</head>
<body>
  <p class="field">
    <label for="mail">Email</label>
    <input id="mail" type="email" required placeholder="you@example.com">
  </p>
  <p>
    <input type="checkbox" id="task" checked>
    <label for="task">Checked task</label>
  </p>
  <button disabled>Disabled button</button>
</body>
</html>

Cliquez dans le champ e-mail : son label devient bleu grâce à :focus-within. Tapez quelque chose qui n'est pas un e-mail et quittez le champ : :user-invalid passe la bordure en ambre. Un simple :invalid aurait marqué en ambre le champ obligatoire vide avant même que vous y touchiez.

Quoi que vous fassiez avec :focus, gardez un style de focus visible. Supprimer le contour sans le remplacer empêche les utilisateurs du clavier de voir où ils se trouvent.

:has(), le sélecteur de parent

:has() cible un élément selon ce qu'il contient. C'est le « sélecteur de parent » réclamé depuis longtemps, et il fonctionne dans les versions actuelles de Chrome, Firefox et Safari.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>has</title>
  <style>
    .option { display: block; border: 2px solid #e5e7eb; padding: 8px; margin: 6px 0; border-radius: 6px; }
    .option:has(input:checked) { border-color: #2563eb; background: #eff6ff; }
  </style>
</head>
<body>
  <label class="option"><input type="radio" name="plan" checked> Monthly</label>
  <label class="option"><input type="radio" name="plan"> Yearly</label>
</body>
</html>

Choisissez l'autre formule : toute la carte suit le bouton radio, sans JavaScript.

Erreurs courantes

Un espace avant les deux-points. li :first-child signifie « un premier enfant à l'intérieur d'un li ». Écrivez li:first-child.
Croire que p:nth-child(1) veut dire « le premier p ». Cela veut dire « le premier enfant, si c'est un p ». Utilisez :first-of-type pour le premier p.
Compter à partir de 0. Les positions commencent à 1 : :nth-child(0) ne cible rien.
Supprimer les contours de focus. :focus { outline: none } sans remplacement casse la navigation au clavier.
Confondre : et ::. :before est une ancienne écriture du pseudo-élément ::before ; les pseudo-classes utilisent toujours un seul deux-points.

Questions fréquentes

Qu'est-ce qu'une pseudo-classe en CSS ?

Un mot-clé placé après deux-points, qui sélectionne des éléments selon leur état ou leur position plutôt que selon leur nom, comme a:hover, li:first-child ou input:focus. Il s'ajoute à un sélecteur normal, et la plupart des pseudo-classes comptent comme une classe pour la spécificité (:where() compte zéro).

Comment fonctionne nth-child en CSS ?

:nth-child(an+b) cible les éléments dont la position parmi leurs frères vaut a×n+b pour n = 0, 1, 2 et ainsi de suite, en comptant à partir de 1. :nth-child(3) est le troisième enfant, :nth-child(odd) ou 2n+1 chaque enfant impair, et :nth-child(n+4) le quatrième et les suivants.

Quelle est la différence entre nth-child et nth-of-type ?

:nth-child() compte tous les éléments frères, puis vérifie le reste du sélecteur ; :nth-of-type() ne compte que les frères du même type d'élément. Dans une liste formée d'un h2 suivi de paragraphes, p:nth-child(1) ne cible rien alors que p:nth-of-type(1) cible le premier paragraphe.

Comment utiliser :not() en CSS ?

Mettez le sélecteur à exclure entre les parenthèses : li:not(.done) cible tous les éléments de liste sans la classe done. Il accepte aussi une liste, input:not([type="checkbox"], [type="radio"]).

Quelle est la différence entre une pseudo-classe et un pseudo-élément ?

Une pseudo-classe (un seul deux-points, :hover) sélectionne un élément existant entier dans un certain état. Un pseudo-élément (deux fois deux-points, ::before) cible une partie d'un élément ou crée du contenu généré.

Concepts liés