Les différents sélecteurs CSS

Les sélecteurs CSS sont l’une des pierres angulaires du langage de style en cascade (Cascading Style Sheets). Ils permettent aux développeurs Frontend de cibler spécifiquement des éléments HTML et d’appliquer des styles à ces éléments.

• Cibler précisément des éléments HTML avec le CSS, que ce soit par type, classe, ID ou attribut, pour appliquer vos styles.
• Utiliser les relations entre éléments (descendants, enfants, adjacents, frères) pour écrire des sélecteurs efficaces, lisibles et adaptés à la structure DOM de votre page.
• Découvrir les pseudo-classes, pseudo-éléments et sélecteurs avancés pour styliser des états, des parties d’éléments ou des ensembles complexes avec finesse.

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 précédé 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 précédé par un titre.</p>
<p>Ce paragraphe est également précédé 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.

👉 Tout comprendre à La pseudo-classe :not en CSS.

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.

Des formations informatique pour tous !

Débutant ou curieux ? Apprenez le développement web, le référencement, le webmarketing, la bureautique, à maîtriser vos appareils Apple et bien plus encore…

Formateur indépendant, professionnel du web depuis 2006, je vous accompagne pas à pas et en cours particulier, que vous soyez débutant ou que vous souhaitiez progresser. En visio, à votre rythme, et toujours avec pédagogie.

Découvrez mes formations Qui suis-je ?

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 */
}

Pour aller plus loin : La pseudo-classe :has en CSS

---

Maîtriser les différents sélecteurs CSS est une compétence essentielle pour styliser une page web avec précision et efficacité. Qu’il s’agisse des sélecteurs de base (balises, classes, identifiants), des sélecteurs combinés ou des sélecteurs avancés comme les attributs et les pseudo-classes, chacun permet de cibler exactement les bons éléments sans alourdir votre code. En comprenant leur fonctionnement, vous gagnez du temps, vous évitez les styles inutiles, et vous améliorez la lisibilité de votre feuille CSS, même sur des projets plus complexes.

Au final, utiliser les bons sélecteurs au bon moment, c’est la clé pour créer un CSS propre, maintenable et évolutif. En adoptant de bonnes pratiques comme limiter les sélecteurs trop spécifiques et privilégier une structure claire, vous facilitez la gestion de vos styles sur le long terme, tout en obtenant un rendu plus cohérent sur l’ensemble du site. C’est exactement ce qui fait la différence entre un simple “CSS qui fonctionne” et un CSS vraiment solide, performant et professionnel.

Chapitre suivant : Les pseudos-classes en CSS