Les sélecteurs CSS sont l’une des pierres angulaires du langage de style en cascade (Cascading Style Sheets). Ils permettent aux développeurs web de cibler spécifiquement des éléments HTML et d’appliquer des styles à ces éléments. Comprendre les différents types de sélecteurs CSS est crucial pour maîtriser la mise en page et le design des sites web. Voici les sélecteurs CSS les plus courants et les accompagner d’exemples concrets.
1. Sélecteurs d’Éléments
Les sélecteurs d’éléments ciblent des balises HTML spécifiques. Par exemple, pour cibler tous les paragraphes <p> dans un document, vous pouvez utiliser le sélecteur suivant :
p {
/* styles */
}
Les sélecteurs universels ciblent tous les éléments HTML d’une page. Ils sont définis par l’astérisque *. Bien qu’ils puissent être pratiques, ils peuvent également entraîner une surcharge de travail pour le navigateur s’ils sont utilisés de manière excessive.
* {
/* styles */
}
2. Sélecteurs de Classe
Les sélecteurs de classe permettent de cibler des éléments ayant une classe spécifique. Les classes sont définies dans le HTML à l’aide de l’attribut class. Voici comment utiliser un sélecteur de class pour un paragraphe ayant la class suivante class="important" :
<p class="important">Ceci est un paragraphe important.</p>
.important {
/* styles */
}
3. Sélecteurs d’ID
Les sélecteurs d’ID sont utilisés pour cibler un élément spécifique ayant un identifiant unique. Les identifiants sont définis dans le HTML avec l’attribut id. Voici comment utiliser un sélecteur d’ID pour un balise <div> ayant comme l’identifiant suivant : id="header".
<div id="header">Contenu du header</div>
#header {
/* styles */
}
4. Sélecteurs d’Attributs
Les sélecteurs d’attributs ciblent les éléments HTML en fonction de leurs attributs et de leurs valeurs. Par exemple, pour cibler tous les liens <a> ayant un attribut target="_blank", vous pouvez utiliser :
a[target="_blank"] {
/* styles */
}
Ou par exemple pour tous les éléments input qui ont l’attribut type="text" :
input[type="text"] {
/* styles */
}
5. Sélecteurs de relation
Le sélecteur descendant (A B) cible tous les éléments de type B qui sont descendants des éléments de type A. Dans l’exemple ci-dessous, cela cible tous les éléments <p> qui sont à l’intérieur d’une balise <div>.
<div> <p>Ceci est un paragraphe à l'intérieur d'une div.</p> </div>
div p {
/* styles */
}
Le sélecteur enfant (A > B) cible les éléments de type B qui sont des enfants directs des éléments de type A :
<ul> <li>Élément de liste 1</li> <li>Élément de liste 2</li> </ul>
ul > li {
/* styles */
}
Le sélecteur adjacent (A + B) cible les éléments de type B qui sont immédiatement suivis par un élément de type A. Dans l’exemple ci-dessous, cela cible les éléments <p> qui sont situés immédiatement après un élément <h2> :
<h2>Titre</h2> <p>Ce paragraphe est immédiatement suivi par un titre.</p>
h2 + p {
/* styles */
}
Le sélecteur général de frère (A ~ B) cible tous les éléments de type B qui partagent le même parent que l’élément de type A, et qui viennent après celui-ci :
<h3>Titre 1</h3> <p>Ce paragraphe est suivi par un titre.</p> <p>Ce paragraphe est également suivi par un titre.</p>
h3 ~ p {
/* styles */
}
6. Sélecteurs de Pseudo-Classes
- Pseudo-classes liées à l’état (
:hover,:active,:focus, …) - Pseudo-classes de contenu (
:first-child,:last-child,:nth-child(), …) - Pseudo-classes de lien (
:link,:visited) - Pseudo-classes d’éléments (
:checked,:disabled,:enabled, …) - Pseudo-classes de langage (
:lang())
Par exemple pour cibler les liens au survol de la souris :
a:hover {
/* styles */
}
7. Sélecteurs de Pseudo-Éléments
- Pseudo-éléments (
::before,::after,::first-line,::first-letter, …)
Par exemple, si vous souhaitez cibler la première lettre de tous les éléments <p> (paragraphes) dans votre page HTML :
p::first-letter {
/* styles */
}
8. Sélecteurs de négation
Le sélecteur de négation :not() permet de cibler des éléments qui ne correspondent pas à un sélecteur spécifique. Cela permet d’appliquer des styles à tous les éléments, sauf ceux qui correspondent à un certain critère. Par exemple, si nous voulons appliquer un style à tous les paragraphes sauf ceux qui ont la class exclu.
<p>Ceci est un paragraphe.</p> <p class="exclu">Ceci est un paragraphe exclu.</p> <p>Ceci est un autre paragraphe.</p>
p:not(.exclu) {
/* styles */
}
Dans cet exemple, le premier et le troisième paragraphe recevront le style spécifié, tandis que le deuxième paragraphe, ayant la class exclu, ne recevra pas ce style en raison du sélecteur de négation.
9. Sélecteurs de Grille
Les sélecteurs de grille en CSS permettent de cibler des éléments HTML en fonction de leur position dans une grille CSS. Avec l’introduction des spécifications CSS Grid Layout, de nouveaux sélecteurs ont été ajoutés pour permettre aux développeurs de cibler spécifiquement des cellules ou des régions de leur grille.
Le sélecteur:nth-column() cible toutes les cellules d’une colonne spécifique dans une grille. Il est utilisé avec la fonction nth-column() en spécifiant le numéro de colonne cible. L’exemple ci-dessous cible toutes les cellules de la deuxième colonne de la grille.
grid-item:nth-column(2) {
/* styles */
}
Le sélecteur:nth-row() cible toutes les cellules d’une ligne spécifique dans une grille. Il est utilisé avec la fonction nth-row() en spécifiant le numéro de ligne cible. L’exemple ci-dessous cible toutes les cellules de la troisième ligne de la grille.
grid-item:nth-row(3) {
/* styles */
}
Le sélecteur:nth-of-type() cible les éléments qui sont des enfants d’un conteneur de grille et qui correspondent à un certain type et à un certain nombre de cellules dans la grille. L’exemple ci-dessous cible toutes les cellules impaires dans la grille.
grid-item:nth-of-type(odd) {
/* styles */
}
Les sélecteurs css :nth-column() et :nth-row() peuvent également être combinés pour cibler une cellule spécifique dans une grille en utilisant une notation comme nth-column(2 of .grid) ou nth-row(3 of .grid). L’exemple ci-dessous cible toutes les cellules de la troisième ligne de la grille ayant la classe grid.
grid-item:nth-row(3 of .grid) {
/* styles */
}
10. Sélecteur de plage
Les sélecteurs de plage en CSS permettent de cibler des éléments HTML en fonction de leur position dans une plage spécifique dans un ensemble d’éléments. Ces sélecteurs sont particulièrement utiles pour cibler des éléments spécifiques dans une séquence ordonnée d’éléments HTML, comme une liste ou une série de paragraphes.
Le sélecteur :first-of-type cible le premier élément de son type au sein de son parent. L’exemple ci-dessous cible le premier paragraphe de chaque conteneur parent.
p:first-of-type {
/* styles */
}
Le sélecteur :last-of-type cible le dernier élément de son type au sein de son parent. L’exemple ci-dessous cible le dernier élément <div> de chaque conteneur parent.
div:last-of-type {
/* styles */
}
Le sélecteur :only-of-type cible les éléments qui sont le seul élément de leur type au sein de leur parent. L’exemple ci-dessous cible les éléments <h1> qui sont les seuls éléments de leur type au sein de leur parent.
h1:only-of-type {
/* styles */
}
Le sélecteur :nth-of-type() cible les éléments qui sont des enfants d’un conteneur et correspondent à un certain type et à un certain nombre d’éléments dans cet ensemble. L’exemple ci-dessous cible le deuxième élément <li> de chaque conteneur parent.
li:nth-of-type(2) {
/* styles */
}
11. Sélecteur de type d’ensemble
Les sélecteurs d’ensemble en CSS permettent de cibler des éléments HTML qui correspondent à plusieurs sélecteurs en même temps. Cela permet de définir des règles de style spécifiques pour les éléments qui répondent à plusieurs critères de sélection.
Les sélecteurs de type d’ensemble :matches() ou :is() permettent de combiner plusieurs sélecteurs en une seule déclaration. Ils sont utiles lorsque vous souhaitez appliquer un style à un élément s’il correspond à l’un des sélecteurs donnés. La fonction :matches() est généralement préférée car elle est plus explicite. L’exemple ci-dessous cible tous les éléments <h1>, <h2> et <h3>.
:matches(h1, h2, h3) {
/* styles */
}
Le sélecteurs de type d’ensemble :has() permet de cibler les éléments qui contiennent des éléments correspondant à un sélecteur spécifique. Cependant, ils ne sont pas encore largement pris en charge par tous les navigateurs. L’exemple ci-dessous cible tous les éléments <div> qui contiennent un élément <p>.
div:has(p) {
/* styles */
}
