Les sélecteurs sont au cœur du CSS : ce sont eux qui permettent de cibler précisément les éléments auxquels on veut appliquer un style.
Les sélecteurs de base
Par nom d'élément
La forme la plus directe consiste à utiliser le nom de la balise HTML. h1 ciblera tous les titres de premier niveau, h2 tous les titres de second niveau, et ainsi de suite. Si plusieurs éléments d'une même page partagent la même balise, ils hériteront tous du même style.
Pour appliquer les mêmes règles à plusieurs types d'éléments en une seule déclaration, on sépare les sélecteurs par une virgule :
h1,
h2 {
color: white;
background: black;
}Par classe
Cibler tous les éléments d'un même type est utile, mais on a souvent besoin de plus de précision. C'est là qu'interviennent les classes. On ajoute un attribut class à l'élément HTML concerné, puis on le cible en CSS avec un point suivi du nom de la classe :
<h2 class="about-title">À propos</h2>.about-title {
color: white;
background: black;
}Le nom de classe doit être alphanumérique (tirets et underscores autorisés, mais pas de chiffre en premier caractère). Un même élément peut porter plusieurs classes, séparées par des espaces.
C'est l'approche à privilégier dans la grande majorité des cas : elle est flexible, réutilisable, et s'adapte facilement aux évolutions du projet.
Par identifiant
On peut aussi cibler un élément par son attribut id, en utilisant le caractère # :
#main-title {
color: white;
}Cependant, l'usage des id pour le style est déconseillé. Un id doit être unique dans la page, ce qui en fait un outil très limité pour la mise en forme. On réservera les id à d'autres usages (JavaScript, ancres de navigation) et on préférera systématiquement les classes.
Les sélecteurs combinés
On peut imbriquer les sélecteurs pour cibler des éléments en fonction de leur position dans le document. En séparant deux sélecteurs par un espace, on sélectionne les éléments correspondant au second qui sont descendants (directs ou indirects) de ceux correspondant au premier :
ol li {
color: green;
}Ce sélecteur cible tous les li qui se trouvent à n'importe quelle profondeur à l'intérieur d'un ol. Le niveau d'imbrication n'a pas d'importance.
On peut enchaîner autant de niveaux que nécessaire, ul ul li ne sélectionnera par exemple que les li d'une liste imbriquée dans une autre liste. Cela dit, les sélecteurs trop complexes deviennent rapidement difficiles à maintenir. Dans la plupart des cas, ajouter une classe est une solution plus simple et plus robuste qu'un sélecteur structurel élaboré.
Les sélecteurs moins courants
Ces sélecteurs couvrent des cas plus spécifiques. On les rencontre moins souvent, mais ils peuvent s'avérer utiles.
L'enfant direct (>) ne cible que les descendants immédiats, et non les éléments plus profondément imbriqués :
article > p { ... } /* Seulement les <p> directement dans <article> */Le voisin général (~) sélectionne tous les éléments qui suivent un élément donné au même niveau :
.intro ~ p { ... } /* Tous les <p> qui suivent .intro dans le même parent */Le voisin adjacent (+) ne cible que l'élément qui suit immédiatement :
h2 + p { ... } /* Le <p> juste après un <h2> */*Le sélecteur universel (``)** cible tous les éléments de la page (à utiliser avec parcimonie).
Le sélecteur d'attribut permet de cibler un élément en fonction de la valeur d'un de ses attributs HTML. Très pratique pour les formulaires :
input[type="email"] {
background: lightblue;
}La priorité entre les règles
Quand plusieurs règles s'appliquent au même élément, une seule l'emporte. Le principe de base est que la règle la plus précise gagne. Si deux règles ont la même précision, c'est la dernière déclarée dans le fichier qui l'emporte.
Cette notion s'appelle la spécificité et sera traitée en détail dans un chapitre dédié. Ce qu'il faut retenir pour l'instant : un sélecteur ciblant body h2 est plus précis qu'un sélecteur ciblant simplement h2, et prendra donc le dessus.
Il faut aussi savoir que les navigateurs appliquent leurs propres styles par défaut (le user agent stylesheet), c'est ce qui fait que les liens sont bleus, les titres plus grands et en gras, ou les listes indentées. Ces styles ont une priorité très faible et sont automatiquement écrasés dès qu'on définit ses propres règles.
Déboguer avec l'inspecteur
Quand une règle ne s'applique pas comme prévu, l'inspecteur du navigateur est votre meilleur allié. Un clic droit → Inspecter sur n'importe quel élément affiche dans l'onglet Styles toutes les règles qui lui sont appliquées. Une règle barrée signifie qu'elle a été écrasée par une règle plus spécifique. Si la règle n'apparaît pas du tout, c'est que le sélecteur ne cible pas l'élément, il y a probablement une erreur à corriger.
Les pseudo-classes
Les pseudo-classes permettent d'appliquer des styles en fonction de l'état d'un élément. Elles se notent avec deux points (:) après le sélecteur.
:hover s'applique au survol :
nav a {
color: green;
}
nav a:hover {
color: red;
}:focus s'active quand un champ de formulaire est sélectionné, utile pour améliorer l'accessibilité et l'expérience utilisateur :
input:focus {
color: red;
}:visited cible les liens déjà visités.
:first-child, :last-child et :nth-child(n) permettent de cibler un élément en fonction de sa position parmi ses voisins :
ol li:first-child { ... } /* Premier élément */
ol li:last-child { ... } /* Dernier élément */
ol li:nth-child(2) { ... } /* Deuxième élément */:nth-child() accepte aussi odd (impairs) et even (pairs), ce qui est très pratique pour le style en zébrures des tableaux :
tr:nth-child(even) {
background: #f5f5f5;
}Pour une référence complète des pseudo-classes disponibles (il en existe plus d'une soixantaine), la documentation MDN fait office de référence incontournable.
Si vous souhaitez vous exercer avant de passer à la suite, CSS Diner est un excellent petit jeu qui propose une série de niveaux progressifs autour des sélecteurs, une bonne façon de consolider tout ce qu'on vient de voir.
Dans le prochain chapitre, on s'attaquera aux propriétés de mise en forme du texte.
