Le sélecteur définit à quel élément de la page un style CSS sera appliqué. Par exemple:

H1 { color: Tomato }

La couleur Tomato sera appliquée à tous les éléments H1 de la page.

Il est possible de grouper plusieurs sélecteurs, en les séparant par des virgules. Exemple:

H1 { color: Tomato }
H2 { color: Tomato }
H3 { color: Tomato }

Ces trois règles peuvent être groupées comme ceci:

H1, H2, H3 { color: Tomato }

L’importance des sélecteurs

Le choix des sélecteurs appropriés joue un grand rôle, c’est là que se joue la qualité architecturale du code CSS.

Quand on essaie de juger la qualité d’un code CSS, la partie à l’intérieur des crochets, les valeurs et propriétés, c’est la partie “cosmétique”. Ça marche, ou pas.

Le choix des sélecteurs, au contraire, est très délicat, et repose sur des hypothèses:

The stuff outside the curly braces — the selectors — that’s harder to judge. It needs to be evaluated with lots of “what ifs”: What if this selects something you didn’t intend to? What if the markup changes? What if someone else writes some CSS that negates this? Jeremy Keith

Sélecteurs du CSS niveau 1

E tout élément de type E
E:link tout élément E qui est l’ancre d’un hyperlien
E:visited un hyperlien qui a déjà été visité
E:hover un élément E que l’utilisateur survole
E:focus un élément E faisant l’objet d’une sélection, notamment en utilisant le clavier
E:active un élément E soumis à des actions utilisateur
E::first‑line la première ligne d’un élément E
E::first‑letter la première lettre d’un élément E
.c tout élément ayant la classe “c”
#myid tout élément avec un ID égal à “myid”
E.warning tout élément E ayant la classe “warning”
E#myid tout élément E avec un ID égal à “myid”
E F un élément F qui est contenu dans un élément E

Voici un exemple utilisant “first-letter” pour produire une lettrine:

p::first-letter {
  font-size: 200%;
  float: left;
}

Sélecteurs du CSS niveau 2

* tous les éléments du document
E[foo] un élément E ayant un attribut “foo”
E[foo="bar"] un élément E dont l’attribut “foo” a pour valeur “bar”
E[foo~="bar"] un élément E dont l’attribut “foo” est une liste de valeurs séparées par des espaces, contenant la valeur “bar”
E[foo|="en"] un élément E dont l’attribut “foo” est égal à “en” ou commence par “en” suivi d’un trait d’union “-“
E:first‑child un élément E premier descendant de son parent
E:lang(fr) un élément de type E dans la langue “fr”
E::before le pseudo-élément inséré avant le contenu d’un élément E
E::after le pseudo-élément inséré après le contenu d’un élément E
E > F un élément F descendant direct d’un élément E
E + F un élément F ayant un élément E au même niveau que lui, voisin direct ou non

Un exemple réel:

input[type="checkbox"],
input[type="radio"] {
	padding: 0;
}

Cette règle annule le “padding” pour les éléments interactifs de type “case à cocher” ou “bouton radio” .

Voici un autre exemple réel, plutôt subtil:

a[href]:after {
	content: " (" attr(href) ")";
}

Cette règle est contenue dans les feuilles de style “print” (dédiées à l’impression) du framework HTML5Boilerplate. Son effet est de détecter tous les liens (élément a ayant un attribut href), et va afficher à la suite du lien son URL. Ainsi, si on imprime une page du site, chaque lien sera suivi de l’URL.

Sélecteurs du CSS niveau 3

E[foo^="bar"] un élément E dont l’attribut “foo” commence par “bar”
E[foo$="bar"] un élément E dont l’attribut “foo” se termine par “bar”
E[foo*="bar"] un élémént E dont l’attribut “foo” contient au moins une fois le terme “bar”
E:root un élément E, racine du document
E:nth‑child(n) un élément E, n-ième descendant direct de son parent
E:nth‑last‑child(n) un élément E, n-ième descendant direct de son parent, en partant du dernier descendant direct
E:nth‑of‑type(n) un élément E, n-ième du type “n” parmi les autres éléments du même niveau
E:nth‑last‑of‑type(n) un élément E, n-ième du type “n” parmi les autres éléments du même niveau en partant du dernier
E:last‑child un élément E, dernier descendant direct de son parent
E:first‑of‑type un élément E, premier descendant de son type
E:last‑of‑type un élément E, dernier descendant de son type
E:only‑child un élément E, seul descendant de son parent
E:only‑of‑type un élément E, seul descendant de ce type
E:empty un élément E n’ayant aucun contenu (autres éléments ou texte)
E:target un élément E dont l’identifiant est la cible de l’URI courante
E:enabled un élément E interactif dont l’état est actif
E:disabled un élément E interactif dont l’état est inactif
E:checked un élément E interactif coché (typiquement : checkbox ou bouton radio)
E:not(s) un élément E qui ne correspond pas au sélecteur “s”
E ~ F un élément F directement précédé par un élément E, au même niveau

Un exemple réel:

a[href*="tumblr.com"]:before {
	content: "\2b8a";
}

Cette règle CSS a pour effet d’ajouter une icône (l’élément \2b8a qui correspond à un glyphe dans la fonte d’icônes Icomoon) devant chaque lien pointant vers Tumblr.

Liens utiles