Sélecteurs combinés

1. Types de sélecteurs combinés

Les sélecteurs combinés en CSS permettent de sélectionner des éléments en fonction de leur position hiérarchique par rapport à d'autres éléments. Cela les rend utiles pour appliquer des styles à des éléments qui dépendent du contexte ou lorsque nous avons besoin de styliser des éléments dans une structure complexe. Les sélecteurs combinés sont un outil puissant pour des sélections précises lorsque la simple utilisation d'une classe ou d'un identifiant ne suffit pas. Examinons les principaux types de sélecteurs combinés en CSS, notamment le sélecteur de descendant, le sélecteur de l'enfant direct, le sélecteur du frère adjacent et le sélecteur des frères généraux.

Les sélecteurs combinés en CSS incluent divers moyens de sélectionner des éléments basés sur la hiérarchie HTML. Les principaux types de sélecteurs combinés :

• Sélecteur de descendant (Descendant Selector) : sélectionne les éléments qui se trouvent dans un autre élément à n'importe quel niveau d'imbrication.
• Sélecteur de l'enfant direct (Child Selector) : sélectionne uniquement les descendants immédiats d'un élément spécifique.
• Sélecteur du frère adjacent (Adjacent Sibling Selector) : sélectionne l'élément qui suit immédiatement un autre élément au même niveau de hiérarchie.
• Sélecteur des frères généraux (General Sibling Selector) : sélectionne tous les éléments au même niveau qui suivent un élément donné.

Chacun de ces sélecteurs convient à différents cas et permet de sélectionner avec précision des éléments en fonction de leur position sur la page.

2. Sélecteur de descendant (Descendant Selector)

Le sélecteur de descendant sélectionne tous les éléments à l'intérieur d'un autre élément, quel que soit le niveau d'imbrication. Il s'écrit avec un espace entre les sélecteurs. Ce type de sélecteur est utile lorsque vous devez styliser les éléments à l'intérieur d'un autre élément, par exemple, tous les <p> à l'intérieur d'un <div> avec une certaine classe.

.container p {
  color: blue;
}

<div class="container">
  <p>Ce texte sera bleu puisqu'il est dans un conteneur.</p>
  <div>
    <p>Ce texte sera également bleu.</p>
  </div>
</div>
<p>Ce texte ne sera pas modifié car il n'est pas dans un conteneur.</p>

Ici, le sélecteur .container p sélectionnera tous les éléments <p> à l'intérieur d'un élément avec la classe container, y compris les éléments à n'importe quel niveau d'imbrication.

3. Sélecteur de l'enfant direct (Child Selector)

Le sélecteur de l'enfant direct sélectionne uniquement les descendants immédiats d'un élément. Il s'écrit avec le symbole > entre les sélecteurs. Ce sélecteur est utile lorsque vous devez appliquer un style uniquement aux éléments de niveau supérieur d'imbrication sans affecter les niveaux plus profonds.

      
  .container > p {
    font-weight: bold;
  }
      
    

      
  <div class="container">
    <p>Ce texte sera en gras.</p>
    <div>
      <p>Ce texte restera normal car il n'est pas un descendant direct du conteneur.</p>
    </div>
  </div>
      
    

Ici, seul le premier <p> deviendra en gras, car il est un descendant direct de .container, tandis que le <p> imbriqué ne sera pas modifié.

4. Sélecteur du frère adjacent (Adjacent Sibling Selector)

Le sélecteur du frère adjacent sélectionne l'élément qui suit immédiatement un autre élément et qui se trouve au même niveau d'imbrication. Ce sélecteur est indiqué par le symbole + entre les sélecteurs et est utile pour appliquer des styles à un élément qui suit immédiatement un autre, par exemple, au premier paragraphe qui suit un titre.

      
  h2 + p {
    color: green;
  }
      
    

      
  <h2>Titre</h2>
  <p>Ce texte deviendra vert car il suit immédiatement un titre.</p>
  <p>Ce texte ne sera pas modifié car il n'est pas un élément adjacent après h2.</p>
      
    

Ici, le sélecteur h2 + p changera la couleur uniquement du premier paragraphe <p> qui suit immédiatement un <h2>.

5. Sélecteur des frères généraux (General Sibling Selector)

Le sélecteur des frères généraux sélectionne tous les éléments au même niveau d'imbrication qui se trouvent après un élément donné, peu importe s'ils sont directement après ou non. Ce sélecteur est indiqué par le symbole ~ entre les sélecteurs.

      
  h2 ~ p {
    font-style: italic;
  }
      
    

      
  <h2>Titre</h2>
  <p>Ce paragraphe sera en italique.</p>
  <div>
    <p>Ce paragraphe sera également en italique car il est un frère d'h2 au même niveau d'imbrication.</p>
  </div>
      
    

Dans cet exemple, le sélecteur h2 ~ p sélectionne tous les éléments <p> qui suivent un <h2> au même niveau, peu importe s'il y a d'autres éléments entre eux.

6. Exemple d'utilisation de tous les sélecteurs combinés

Voici un exemple de HTML et CSS démontrant l'utilisation de tous les sélecteurs combinés pour sélectionner divers éléments en fonction de leur position sur la page.

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Exemple de sélecteurs combinés CSS</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <p>Un paragraphe descendant et enfant direct de .container.</p>
    <div>
      <p>Un paragraphe descendant mais pas enfant direct de .container.</p>
    </div>
  </div>
  <h2>Titre</h2>
  <p>Un paragraphe frère adjacent de h2.</p>
  <div>Ce bloc n'affectera pas les paragraphes suivants.</div>
  <p>Un paragraphe frère général de h2.</p>
</body>
</html>

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Exemple de sélecteurs combinés CSS</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <p>Un paragraphe descendant et enfant direct de .container.</p>
    <div>
      <p>Un paragraphe descendant mais pas enfant direct de .container.</p>
    </div>
  </div>
  <h2>Titre</h2>
  <p>Un paragraphe frère adjacent de h2.</p>
  <div>Ce bloc n'affectera pas les paragraphes suivants.</div>
  <p>Un paragraphe frère général de h2.</p>
</body>
</html>

/* Sélecteur de descendant */
.container p {
  color: blue;
}

/* Sélecteur de l'enfant direct */
.container > p {
  font-weight: bold;
}

/* Sélecteur du frère adjacent */
h2 + p {
  color: green;
}

/* Sélecteur des frères généraux */
h2 ~ p {
  font-style: italic;
}