Sélecteur de frère général

Fait partie de la section CSS Mastery du Journey HTML de Coddy — leçon 5 sur 43.

Le sélecteur de frères général (~) sélectionne tous les éléments qui sont des frères d'un élément spécifié et qui le suivent.

Par exemple :

<div>
  <p>Paragraph 1</p>
  <h2>Heading</h2>
  <p>Paragraph 2</p>
  <p>Paragraph 3</p>
</div>

Avec ce CSS :

h2 ~ p {
  color: blue;
}

Après avoir appliqué ce CSS, le résultat sera :

Le paragraphe 1 reste inchangé (ce n'est pas un élément frère qui suit h2)

Le paragraphe 2 devient bleu (c'est un élément frère qui vient après h2)
Le paragraphe 3 devient bleu (c'est un élément frère qui vient après h2)

Testez-vous

Cette leçon comprend un petit quiz. Commencez la leçon pour y répondre et suivre votre progression.

Testez-vous

Cette leçon comprend un petit quiz. Commencez la leçon pour y répondre et suivre votre progression.

Défi

Facile

Créez une règle CSS utilisant le sélecteur général de frères pour que tous les éléments <p> qui se trouvent après le <h1> s'illuminent en rose vif (#ff69b4).

Aide-mémoire

Le sélecteur général de fratrie (~) sélectionne tous les éléments qui sont des frères d'un élément spécifié et qui le suivent.

h2 ~ p {
  color: blue;
}

Ceci sélectionne tous les éléments <p> qui sont des frères de <h2> et qui le suivent dans la structure HTML.

Essayez vous-même

<html>
<head>
    <title>General Sibling Selector</title>
    <style>
        /* CSS solution goes here */

    </style>
</head>
<body>
    <h1>Welcome to the Party!</h1>
    <p>Grab a drink.</p>
    <p>Say hello to new friends.</p>
    <div>Dance floor area</div>
    <p>Take a selfie!</p>
    <p>Enjoy the snacks.</p>
</body>
</html>

Testez-vous

Cette leçon comprend un petit quiz. Commencez la leçon pour y répondre et suivre votre progression.