Cours CSS / Combinateurs et pseudo-classes : relations, états et positions

Les combinateurs sélectionnent les éléments selon leurs relations dans la structure HTML, tandis que les pseudo-classes sélectionnent des états ou des conditions structurelles. Un sélecteur enfant diffère d'un sélecteur descendant, et :first-child se réfère au premier élément enfant plutôt qu'au premier élément d'un type particulier.

Lire les relations parent, enfant, descendant et frère

Dans la structure suivante, section est le parent de h2, du paragraphe A, de div et du paragraphe C. Le paragraphe B est un enfant de div, qui est un descendant de section. A et C sont des frères et sœurs car ils ont les mêmes parents, mais A et B ne sont pas des frères et sœurs car ils ont des parents différents. La structure HTML est plus importante que l'apparence à l'écran.

<section class="garden">
  <h2>Visitor Information</h2>
  <p>A: Operating hours</p>
  <div>
    <p>B: Greenhouse Guide</p>
  </div>
  <p>C: What you need</p>
</section>

section.garden
├─ h2
├─ p  ← A
├─ div
│  └─ p  ← B
└─ p  ← C

Un combinateur cible normalement l'élément à sa droite. h2 + p applique le style à p immédiatement après un h2 en tant que frère. Les nœuds de texte d'espacement provenant de l'indentation ou des sauts de ligne n'interrompent pas cette relation élément-frère. Pour plus de détails, voir Sélecteurs CSS de base : Type, Classe, ID et Attributs.

Comparer les sélecteurs descendant et enfant

.garden p { color: #087f5b; }
.garden > p { border-left: 4px solid #087f5b; padding-left: 12px; }

La première règle rend tous les p dans garden verts. Elle contient B même s'il y a un div au milieu. La deuxième règle ajoute uniquement une bordure gauche et un espacement intérieur à gauche aux enfants directs A et C. Comme color et border-left sont des propriétés différentes, A et C peuvent avoir à la fois la couleur verte et la bordure.

Un sélecteur descendant convient pour le style des paragraphes partagé dans toute une section. Un sélecteur d’enfant direct peut exclure les paragraphes à l’intérieur de cartes imbriquées. Les changements de structure affectent ces correspondances; évitez de chaîner des combinateurs enfant inutiles qui rendent la feuille de style dépendante d'une profondeur rigide. Voir MDN: Combinators.

Comparer les frères et sœurs suivant et subséquent

h2 + p { background-color: #fff4cc; }
h2 ~ p { font-style: italic; }

La première règle donne un fond jaune au paragraphe A, qui est le prochain élément frère du titre. La seconde met A et C en italique, car ce sont des éléments p frères placés après h2. B a un parent différent et ne correspond donc pas au sélecteur. Aucun de ces deux combinateurs ne sélectionne un frère précédent.

Si vous insérez <div>Additional notice</div> entre h2 et A, le fond jaune disparaîtra car A n'est plus le frère immédiat. Cependant, la condition selon laquelle il suit h2 au sein du même parent reste valide, donc l’inclinaison persiste. Voir cette différence vous évitera d’avoir à mémoriser + et ~ comme « sélecteurs similaires ».

Sélectionnez les états et positions avec des pseudo-classes

a:hover { background-color: #fff4cc; }
a:focus-visible { outline: 3px solid #1d4ed8; outline-offset: 3px; }
.plants li:first-child { font-weight: bold; }
.plants li:nth-child(odd) { background-color: #e9f7ef; }

:hover sélectionne l'état dans lequel le pointeur survole l’élément. :focus-visible sélectionne l'état dans lequel le navigateur détermine qu'un affichage de focus est nécessaire, et est utile pour vérifier lors de la navigation entre les éléments avec la touche Tab. :focus sélectionne l'état focalisé lui-même, donc la signification des deux n'est pas complètement la même. Cet exemple spécifie un contour supplémentaire sans supprimer l'indicateur de focus par défaut. Vous pouvez continuer à vous exercer à distinguer la couleur et le focus selon l'état dans un lien réel dans CSS États des liens et Focus clavier visible.

Lorsque vous survolez le lien avec votre souris, l'arrière-plan devient jaune, et lorsque vous naviguez jusqu'au lien avec la touche Tab, un contour bleu apparaît. Dans un environnement tactile, le survol ne peut pas être garanti d'être toujours vécu par l'utilisateur. Laissez les informations essentielles, telles que les heures d'ouverture ou les noms de liens, lisibles par défaut.

:first-child sélectionne si c'est le premier élément enfant de son parent. :nth-child(odd) sélectionne les cas où l'ordre des éléments enfants est impair, comme 1, 3 ou 5. La liste des plantes ci-dessus ne comporte que des li, donc la menthe numéro 1 devient en gras et crée un arrière-plan pour les éléments 1 et 3. Si vous utilisez even (pair) à la place de odd (impair), les numéros 2 et 4 sont les cibles.

p:first-child signifie « un élément p qui est le premier enfant de son parent », plutôt que « le premier p ». Le premier enfant de section dans cet exemple est h2, donc .garden > p:first-child ne correspond à aucun paragraphe. nth-child compte tous les éléments frères, pas seulement les éléments avec la même balise. Utilisez une condition telle que nth-of-type lorsque vous avez besoin de positions au sein d'un même type d'élément. La référence pseudo-classe MDN explique ces conditions d'état et de position.

Exécutez l’exemple complet

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Small Garden</title>
  <style>
body { margin: 24px; font-family: sans-serif; line-height: 1.7; }
    .garden p { color: #087f5b; }
    .garden > p { border-left: 4px solid #087f5b; padding-left: 12px; }
    h2 + p { background-color: #fff4cc; }
    h2 ~ p { font-style: italic; }
    .plants li:first-child { font-weight: bold; }
    .plants li:nth-child(odd) { background-color: #e9f7ef; }
    a:hover { background-color: #fff4cc; }
    a:focus-visible { outline: 3px solid #1d4ed8; outline-offset: 3px; }
  </style>
</head>
<body>
<h1>Small Garden</h1>
  <section class="garden">
    <h2>Visitor Information</h2>
    <p>A: We open at 9am every day.</p>
    <div>
      <p>B: Please observe quietly in the greenhouse.</p>
    </div>
    <p>C: Bring a water bottle and comfortable shoes.</p>
  </section>
  <ul class="plants">
    <li>1: Mint</li>
    <li>2: Basil</li>
    <li>3: Rosemary</li>
    <li>4: Time</li>
  </ul>
  <a href="#contact">Go to the contact section</a>
  <h2 id="contact">Contact</h2>
  <p>Ask at the information desk.</p>
</body>
</html>

Lorsque vous enregistrez et exécutez, A·B·C sont verts, et seuls A et C ont une bordure à gauche. A a un fond jaune, et A et C ont un texte en italique. La liste des plantes a le premier élément en gras et les éléments en position impaire ont un fond clair. Vérifiez les liens en utilisant respectivement la souris et le clavier. Les lettres A~C devant les paragraphes sont des lettres écrites directement dans le texte pour comparer les résultats de sélection.

Changez la structure et testez chaque condition

1. Ajoutez un div entre h2 et A. Vérifiez que seul le fond de A disparaît, en laissant l’italique et les bordures. Après avoir pratiqué, supprimez le div ajouté.
2. Faites de B un enfant direct de la section en ne supprimant que la balise div entourant le paragraphe B. Assurez-vous que B a également une bordure gauche et un texte en italique. Seul A reste correct dans la condition +. Après confirmation, restaurez la div.
3. Remplacez :nth-child(odd) par :nth-child(even). Vérifiez que l'arrière-plan de la liste se déplace des numéros 1 et 3 vers les numéros 2 et 4, et que les lettres en gras du premier enfant restent dans le numéro 1.
4. Sans survoler le lien, placez le focus dans la page, puis appuyez sur Tab pour atteindre le lien. Assurez-vous que le contour de focus est visible et que vous pouvez accéder à la section contact avec Entrée. Si le focus se trouve dans la barre d’adresse, replacez-le d’abord dans la page.

Veuillez vérifier chaque condition séparément. Changer uniquement la valeur de couleur pour élargir la plage de sélection ou ajouter le survol à un problème de focus au clavier ne résoudra pas la cause. Dans les outils de développement, vous pouvez comparer avec la capacité de forcer l'activation de l'état, mais en fin de compte, il est préférable de vérifier les résultats visibles pour l'utilisateur à travers la navigation réelle avec la touche Tab et des mouvements de la souris.