Sélecteurs

La feuille de la Librairie du Campus, au chapitre précédent, ne connaissait que des sélecteurs très grossiers : body, h1, header a. Ils suffisent pour une police et des couleurs générales, mais pas pour dire « une ligne sur deux du catalogue », « le lien de la page où l'on se trouve », « l'étiquette d'un champ obligatoire » ou « le prix d'une carte de livre ». Le sélecteur est la moitié de toute règle : écrire du CSS, c'est d'abord savoir désigner précisément les éléments.

Ce chapitre fait le tour des sélecteurs du CSS d'aujourd'hui : les sélecteurs simples (type, classe, identifiant, attribut), les combinateurs qui expriment une position dans l'arbre du document, les pseudo-classes qui décrivent un état ou un rang, et les pseudo-éléments qui désignent une partie d'un élément. Il se termine par une convention de nommage des classes, qui évite que la feuille ne devienne un enchevêtrement.

2.1 Les sélecteurs simples

Commençons par une page de nouveautés où certains paragraphes portent des classes et un autre un identifiant.

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Sélecteurs simples</title>
  <link rel="stylesheet" href="simples.css">
</head>
<body>
  <h1>Nouveautés</h1>
  <p class="chapeau">Trois livres arrivés cette semaine.</p>
  <p>Programmation Java, d’Ibrahim Alame.</p>
  <p class="prix">32,00 €</p>
  <p>Analyse MPSI, de Jean-Marie Monier.</p>
  <p class="prix promo">40,00 € au lieu de 45,00 €</p>
  <p id="stock">Tous en stock, retrait sous 24 heures.</p>
</body>
</html>

* {
  font-family: system-ui, sans-serif;
}

h1 {
  color: #1f3a68;
}

.chapeau {
  font-style: italic;
}

.prix {
  font-weight: bold;
  color: #a8520a;
}

.promo {
  background-color: #fbe8d5;
}

#stock {
  color: #1f3a68;
}

Sur la capture, le paragraphe « 40,00 € au lieu de 45,00 € » porte les deux classes : il reçoit le gras et l'ocre de .prix et le fond de .promo. Les deux règles se cumulent, car elles ne déclarent pas les mêmes propriétés.

Le sélecteur universel, enfin, est rarement utile seul : donner une police à * ou au body revient au même ici, et body est plus clair (chapitre 3). On le rencontre surtout dans la remise à zéro du modèle de boîte (chapitre 5).

2.2 Les sélecteurs d'attribut

Un sélecteur entre crochets teste un attribut de l'élément. C'est l'outil idéal pour les champs de formulaire, qui diffèrent par leur type, et pour les liens, qui diffèrent par leur adresse.

body {
  font-family: system-ui, sans-serif;
}

/* Valeur exacte */
input[type="email"] {
  border: 2px solid #1f3a68;
}

/* Présence de l'attribut */
[required] {
  background-color: #fbe8d5;
}

/* Commence par… */
a[href^="https://"] {
  font-weight: bold;
}

/* Se termine par… */
a[href$=".pdf"] {
  color: #a8520a;
}

/* Contient… */
a[href*="catalogue"] {
  font-style: italic;
}

a[href^="mailto:"] {
  color: #1f3a68;
}

La page contient quatre liens (vers le site de l'école en https://, vers catalogue.pdf, vers catalogue.html, vers une adresse mailto:) et un petit formulaire dont le champ de courriel est obligatoire.

Le lien vers catalogue.pdf est à la fois ocre (il se termine par .pdf) et en italique (il contient catalogue), comme le lien vers catalogue.html. Le champ de courriel reçoit la bordure de input[type="email"] et le fond de [required]. On aurait aussi pu écrire :required, une pseudo-classe qui désigne les champs obligatoires.

2.3 Les combinateurs

Les sélecteurs vus jusqu'ici ne regardent qu'un élément. Les combinateurs relient deux sélecteurs selon la position des éléments dans l'arbre du document. Prenons un article de structure simple :

<article>
  <h2>…</h2>
  <p>A</p>
  <p>B</p>
  <section>
    <p>C</p>
  </section>
  <p>D</p>
</article>

Le navigateur le représente sous forme d'arbre : chaque élément est le parent de ceux qu'il contient directement, ses enfants ; les enfants d'un même parent sont frères, dans l'ordre du document.

La page d'exemple répète cet article quatre fois ; chacun porte une classe et une seule règle lui donne un fond ocre clair :