Sélecteurs combinés

5.1 Types de sélecteurs

Les sélecteurs combinés en CSS permettent de choisir des éléments en fonction de leur position réciproque dans l'arbre DOM. Ils offrent un contrôle plus précis des styles, permettant de styliser des éléments selon leur contexte. En CSS, il existe plusieurs types de sélecteurs combinés : descendant, enfant, adjacent immédiat et voisin général.

Types de sélecteurs combinés :

• Sélecteur descendant (Descendant Selector)
• Sélecteur enfant (Child Selector)
• Sélecteur adjacent immédiat (Adjacent Sibling Selector)
• Sélecteur voisin général (General Sibling Selector)

5.2 Sélecteur descendant

Le sélecteur descendant sélectionne tous les éléments qui sont des descendants d'un élément spécifié. Les descendants incluent tous les éléments se trouvant à l'intérieur de l'élément spécifié à n'importe quel niveau de profondeur (ce peuvent être non seulement les enfants, mais aussi les petits-enfants et arrière-arrière-petits-enfants).

Synthaxe :

    
      parent descendant {
        propriété: valeur;
        propriété: valeur;
      }
    
  

Exemple :

    
      /* Sélectionne tous les <p> à l'intérieur d'un <div> */
      div p {
        color: blue;
      }
    
  

    
      <div>
        <p>Ce paragraphe sera bleu.</p>
        <div>
          <p>Ce paragraphe sera également bleu, car il est un descendant de "div".</p>
        </div>
      </div>
      <p>Ce paragraphe ne sera pas bleu.</p>
    
  

5.3 Sélecteur enfant

Le sélecteur enfant sélectionne uniquement les éléments qui sont directement enfants d'un parent spécifié.

Synthaxe :

    
      parent > enfant {
        propriété: valeur;
        propriété: valeur;
      }
    
  

Exemple :

    
      /* Sélectionne uniquement les <p> qui sont des enfants directs de .container */
      .container > p {
        color: green;
      }
    
  

    
      <div class="container">
        <p>Ce paragraphe sera vert.</p>
        <div class="wrapper">
          <p>Ce paragraphe ne sera pas vert car il n'est pas un enfant direct de .container.</p>
        </div>
        <p>Ce paragraphe sera vert.</p>
      </div>
      <p>Ce paragraphe ne sera pas vert.</p>
    
  

5.4 Sélecteur adjacent immédiat

Le sélecteur adjacent immédiat sélectionne un élément qui suit immédiatement un élément spécifié et se trouve au même niveau de profondeur.

Synthaxe :

    
      précédent + suivant {
        propriété: valeur;
        propriété: valeur;
      }
    
  

    
      /* Sélectionne le <p> qui suit immédiatement un <h1> */
      h1 + p {
        color: red;
      }
    
  

    
      <h1>Titre 1</h1>
      <p>Ce paragraphe sera rouge, car il suit immédiatement le "h1".</p>
      <p>Ce paragraphe ne sera pas rouge.</p>
    
  

5.5 Sélecteur voisin général

Le sélecteur voisin général sélectionne tous les éléments qui suivent un élément spécifié et se trouvent au même niveau de profondeur.

Synthaxe :

    
      précédent ~ suivant {
        propriété: valeur;
        propriété: valeur;
      }
    
  

Exemple :

    
      /* Sélectionne tous les <p> qui suivent un <h1> au même niveau de profondeur */

      h1 ~ p {
        color: purple;
      }
    
  

    
      <h1>Titre 1</h1>
      <p>Ce paragraphe sera violet.</p>
      <p>Ce paragraphe sera aussi violet.</p>
      <div>
        <p>Ce paragraphe ne sera pas violet, car il est à un autre niveau de profondeur.</p>
      </div>