Sélecteurs Avancés en CSS : Sélectionner avec Précision

Les sélecteurs CSS sont des outils puissants pour cibler des éléments spécifiques d’une page web afin de les styliser. Si vous maîtrisez les sélecteurs de base, vous pouvez maintenant explorer des sélecteurs plus avancés qui vous permettront de cibler des éléments de manière plus précise et plus flexible. Ces sélecteurs avancés peuvent rendre votre code CSS plus concis, performant et facile à maintenir.

1. Les Sélecteurs Combinés

Les sélecteurs combinés en CSS vous permettent de sélectionner des éléments en fonction de leur relation dans le document HTML. Voici les principaux types de sélecteurs combinés :

Sélecteur Descendant

Le sélecteur descendant cible un élément qui est un enfant (ou un descendant) d’un autre élément. Ce sélecteur est représenté par un espace entre les sélecteurs.

Exemple

div p {
  color: blue;
}

Dans cet exemple, tous les éléments <p> à l’intérieur d’un <div> auront un texte bleu, quel que soit leur niveau de profondeur dans le DOM.

Sélecteur Enfant Direct

Le sélecteur enfant direct cible un élément qui est un enfant direct d’un autre élément. Ce sélecteur est représenté par un > entre les éléments.

Un exemple

div > p {
  color: red;
}

Ici, seuls les éléments <p> directement enfants des éléments <div> seront stylisés en rouge. Si un <p> est imbriqué dans un autre élément, il ne sera pas sélectionné.

Sélecteur Frère Adjacent

Le sélecteur frère adjacent cible un élément qui suit immédiatement un autre élément dans le même parent. Il est représenté par le symbole +.

Encore un exemple

h1 + p {
  font-weight: bold;
}

Ce sélecteur applique un style gras (font-weight: bold) au premier <p> immédiatement après chaque <h1>.

Sélecteur Frère Général

Le sélecteur frère général cible tous les éléments frères d’un certain élément, qu’ils soient immédiatement adjacents ou non. Il est représenté par le symbole ~.

L’exemple

h1 ~ p {
  color: green;
}

Ce sélecteur stylise tous les éléments <p> qui sont des frères de <h1> (même parent, même niveau), peu importe leur position relative.

---

2. Sélecteurs d’Attributs

Les sélecteurs d’attributs permettent de cibler des éléments en fonction des valeurs de leurs attributs. Ce type de sélecteur est très utile lorsqu’on veut cibler des éléments spécifiques sans avoir à ajouter de classes ou d’identifiants supplémentaires.

Sélecteur d’Attribut Exact

Ce sélecteur sélectionne les éléments qui ont un certain attribut avec une valeur exacte.

Pour vous donner un exemple

a[href="https://example.com"]
{
  color: blue;
}

Ici, tous les liens <a> ayant un attribut href égal à https://example.com seront stylisés en bleu.

Sélecteur d’Attribut Contenant une Valeur

Le sélecteur suivant cible tous les éléments dont l’attribut contient une certaine valeur.

Un petit exemple

a[href*="example"] {
  color: orange;
}

Ce sélecteur applique la couleur orange à tous les liens dont l’URL dans href contient le mot “example”.

Sélecteur d’Attribut Commencant par une Valeur

Ce sélecteur sélectionne les éléments dont l’attribut commence par une certaine valeur.

Encore un petit exemple

a[href^="https://"]
{
  color: green;
}

Tous les liens <a> dont l’attribut href commence par https:// seront stylisés en vert.

Sélecteur d’Attribut Finissant par une Valeur

Le sélecteur suivant cible les éléments dont l’attribut se termine par une certaine valeur.

Un autre exemple

a[href$=".pdf"] {
  color: red;
}

Ce sélecteur stylise tous les liens pointant vers des fichiers PDF (c’est-à-dire ceux dont l’URL se termine par .pdf) en rouge.

---

3. Sélecteurs Pseudo-Classes

Les pseudo-classes sont des sélecteurs qui permettent de cibler des éléments dans un état particulier. Par exemple, vous pouvez cibler un élément lorsqu’il est survolé, sélectionné, ou activé. Voici quelques-unes des pseudo-classes les plus courantes :

:hover

La pseudo-classe :hover cible un élément lorsque l’utilisateur le survole avec sa souris.

L’exemple sur lequel vous pouvez vous appuyer

button:hover {
  background-color: yellow;
}

Ce code applique une couleur de fond jaune lorsque l’utilisateur survole le bouton.

:focus

La pseudo-classe :focus cible un élément lorsqu’il a le focus, comme un champ de formulaire actif.

Un exemple pour illustrer

input:focus {
  border-color: blue;
}

Ici, l’élément <input> change la couleur de sa bordure lorsqu’il est sélectionné par l’utilisateur.

:nth-child()

La pseudo-classe :nth-child() permet de sélectionner un élément en fonction de sa position parmi ses frères et sœurs. Vous pouvez cibler un élément spécifique ou utiliser des formules pour une sélection plus précise.

Un exemple pour vous aider

ul li:nth-child(odd) {
  background-color: #f2f2f2;
}

Dans cet exemple, tous les éléments <li> impairs dans une liste <ul> auront un fond gris clair.

:not()

La pseudo-classe :not() permet d’exclure certains éléments du style. Cela permet de styliser tous les éléments sauf ceux qui correspondent à un sélecteur donné.

Un exemple pour vous montrer

div:not(.highlight) {
  color: gray;
}

Ici, tous les éléments <div> qui ne possèdent pas la classe .highlight auront un texte gris.

---

4. Sélecteurs Pseudo-Éléments

Les pseudo-éléments permettent de styliser une partie spécifique d’un élément, comme le contenu avant ou après l’élément.

::before

Le pseudo-élément ::before insère du contenu avant l’élément ciblé.

Un exemple pour vous aider sur votre CSS

h1::before {
  content: "✨ ";
  font-size: 20px;
}

Ce code ajoute une étoile avant chaque titre <h1>.

::after

Le pseudo-élément ::after insère du contenu après l’élément ciblé.

Un dernier exemple pour vous

h1::after {
  content: " 🌟";
}

Dans cet exemple, une étoile est ajoutée après chaque titre <h1>.

---

5. Conclusion

Les sélecteurs avancés en CSS vous permettent de cibler des éléments avec une précision incroyable et de créer des styles dynamiques qui répondent aux besoins spécifiques de vos pages web. En combinant des sélecteurs descendants, des sélecteurs d’attributs, des pseudo-classes et des pseudo-éléments, vous pouvez écrire un code CSS plus élégant, performant et facile à maintenir.

Ressources Supplémentaires

• Documentation sur les Sélecteurs CSS - MDN
• Sélecteurs avancés sur CSS-Tricks