Cet article combine les concepts de base des sélecteurs CSS issus du guide officiel et les approches plus avancées des solutions web modernes.

Sélecteurs de classe et d'identifiant

Les sélecteurs de classe et d'identifiant permettent de cibler des éléments spécifiques :

.warning.urgent
#firstp-para

Sélecteurs d'attribut

Sélecteur d'attribut simple

Sélectionner un élément possédant un attribut, sans se soucier de sa valeur :

h1[class] { color: red; }

Cela ciblera les balises <h1> ayant l'attribut class, quelle que soit sa valeur :

<h1 class="hoopla">Bonjour</h1> ✓
<h1>Sérénité</h1>
<h1 class="fancy">Astuce</h1> ✓

Sélecteur d'attribut exact

Cibler un élément dont la valeur d'attribut correspond exactement :

a[href="http://www.css-discuss.org/about.html"] { font-weight: bold; }

Sélecteurs d'attribut partiels

Syntaxe	Description
[foo|="bar"]	Valeur commençant par "bar" suivie d'un tiret
[foo~="bar"]	Valeur contenant "bar" comme mot séparé par des espaces
[foo*="bar"]	Valeur contenant "bar" n'importe où
[foo^="bar"]	Valeur débutant par "bar"
[foo$="bar"]	Valeur se terminant par "bar"
:not([foo])	Élément ne possédant pas l'attribut "foo"
:not(.layui-this)	Élément ne possédant pas la classe "layui-this"

Exemple de [foo|="bar"] :

<h1 class="en"></h1> ✓
<h1 class="en-us"></h1> ✓
<h1 class="en-au"></h1> ✓
<h1 class="cy-en"></h1> ✗

Cas d'usage : images nommées figure-1.gif, figure-2.gif. Utilisation : img[src|="figure"] { }.

Sélecteur insensible à la casse

Ajouter i après la valeur pour ignorer la casse :

a[href$='.PDF' i] { }
plant[type*='rock' i] { }

Sélecteurs basés sur la structure du document

Sélecteur descendant

Cible un élément descendant d'un autre, à n'importe quel niveau :

h1 em { }

Sélecteur enfant direct

Cible un élément qui est un enfant immédiat :

h1 > strong { color: red; }

Sélecteur de frère adjacent

Cible un élément suivant immédiatement un autre (même parent) :

h1 + p { }

Exemple :

<div>
    <h1></h1>
    <p></p> ✓
</div>

Sélecteur de frère général

Cible tous les éléments frères suivants un autre :

h2 ~ ol { }

Exemple :

<div>
    <h2></h2>
    <p></p>
    <ol></ol> ✓
    <ol></ol> ✓
</div>

Pseudo-classes

Chaînage de pseudo-classes

Combinaison de pseudo-classes pour des ciblages précis :

a:link:hover { color: red; }
a:visited:hover { color: maroon; }

L'ordre n'a pas d'importance : a:hover:link fonctionne également.

Utilisation avec la pseudo-classe :lang :

a:link:hover:lang(de) { color: gray; }

Pseudo-classes structurelles

:root

Sélectionne l'élément racine du document, équivalent à html pour les documents HTML :

:root { } /* équivaut à html { } */

:empty

Sélectionne un élément sans enfant (aucun nœud, y compris les nœuds de texte) :

p:empty { }

Exemple :

<p></p> ✓
<p> </p>    ✗ (contient un espace)
<p>          ✗ (contient du texte)
<p><!-- commentaire --></p> ✓

Note : :empty est le seul sélecteur CSS qui prend en compte les nœuds de texte lors du matching (jusqu'en 2017).

:only-child

Sélectionne un élément qui est le seul enfant de son parent (les nœuds de texte ne sont pas considérés) :

a[href] img:only-child { border: 1px solid black; }

Exemple :

<a href="http://w3.org"><img src="w3.png" alt="w3C" /></a> ✓
<a href="http://w3.org"><img src="w3.png" alt="w3C" /> Texte </a> ✓
<a href="http://w3.org"><img src="w3.png" alt="w3C" /><em>Texte</em></a> ✗

:only-of-type

Sélectionne un élément s'il est le seul de son type parmi ses frères :

a img:only-of-type { }

Exemple :

<a href="">
    <b>·</b><img /> ✓
</a>
<a href="">
    <b>·</b><img /><img /> ✗
</a>

Note : p:first-of-type:last-of-type est équivalent à p:only-of-type, car les pseudo-classes s'appliquent à l'élément lui-même.

:first-child et :last-child

Sélectionne le premier ou le dernier enfant de son parent :

p:first-child { }

Exemple :

<div>
    <p>Premier paragraphe</p> ✓
    <ul>
        <li>Clé</li>
    </ul>
    <p>Deuxième paragraphe</p>
</div>

:first-of-type et :last-of-type

Sélectionne le premier ou le dernier élément d'un type donné parmi ses frères :

td:first-of-type { }

Exemple :

<table>
    <tr>
        <th>Compte</th><td>7</td>✓<td></td>
    </tr>
    <tr>
        <td>Compte</td><td>7</td>✓<td></td>
    </tr>
</table>

:nth-child()

Permet de cibler le n-ième enfant :

p:nth-child(1) /* Équivalent à p:first-child */

Exemples d'alternance de couleur :

/* Lignes paires */
ul > li:nth-child(2n+1) { background-color: red; }
/* Toutes les 3 lignes */
ul > li:nth-child(3n+1) { background-color: red; }

Sélectionner à partir de la 9e ligne :

tr:nth-child(n+9) { }
tr:nth-child(8) ~ tr { } /* Équivalent */

Sélectionner en partant de la fin :

tr:nth-last-child() { }

Astuce : déterminer le nombre d'enfants

/* Un seul enfant */
li:only-child { width: 100%; }
/* Deux enfants : premier et deuxième */
li:nth-child(1):nth-last-child(2),
li:nth-child(2):nth-last-child(1) { width: 50%; }

:nth-of-type() et :nth-last-of-type()

Sélectionne le n-ième élément d'un type donné :

:nth-of-type(1):nth-last-of-type(1) /* Équivalent à :only-of-type */

Pseudo-classes dynamiques

Ces pseudo-classes réagissent à l'interaction de l'utilisateur :

:link { } /* Lien non visité */
:visited { } /* Lien visité */
a.external:link { }
a.external:visited { }

Pseudo-classe	Description
:focus	Élément qui a le focus (saisie clavier)
:hover	Élément survolé par la souris
:active	Élément en cours d'activaiton (clic)

Ordre recommandé : :link, :visited, :hover, :focus, :active. L'ordre est important pour éviter que les styles ne se chevauchetn incorrectement.

Pseudo-classes d'état d'interface utilisateur (UI)

Ces pseudo-classes ciblent les éléments de formulaire en fonction de leur état :

Pseudo-classe	Description
:enabled	Élément activé (accepte les entrées)
:disabled	Élément désactivé
:checked	Case à cocher ou bouton radio coché

:target

Cible l'élément dont l'id correspond au fragment d'URL (#).

:lang()

Cible les éléments basés sur la langue définie via l'attribut lang ou par héritage.

:not() (pseudo-classe de négation)

Exclut les éléments correspondant au sélecteur passé en argument.

Pseudo-éléments

Section en cours de rédaction.