Sélecteur de frère adjacent

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

Le sélecteur de frère adjacent (+) est utilisé pour styliser un élément qui suit immédiatement un élément spécifique. Les deux doivent avoir le même parent, et « adjacent » signifie « immédiatement l'un après l'autre ».

Par exemple :

<h2>Heading</h2>
<p>This paragraph is styled</p>

Avec ce CSS :

h2 + p {
  font-weight: bold;
}

Le paragraphe est stylisé car il suit directement un élément 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 un sélecteur CSS qui cible uniquement les paragraphes (<p>) qui suivent directement un élément <h2> décrivant un match de basket. Appliquez à ces paragraphes une couleur de police bleue et une taille de police de 18px.

Aide-mémoire

Le sélecteur de frère adjacent (+) applique un style à un élément qui suit immédiatement un élément spécifique. Les deux éléments doivent avoir le même parent.

Syntaxe :

element1 + element2 {
  /* styles */
}

Exemple :

h2 + p {
  font-weight: bold;
}

Ceci cible les paragraphes qui suivent directement un élément h2.

Essayez vous-même

<html>
<head>
    <title>Adjacent Sibling Selector</title>
    <style>
        /* CSS solution goes here */
        
    </style>
</head>
<body>
    <h2>Basketball Game Overview</h2>
    <p>The basketball game was an exciting match between the **Los Angeles Lakers** and the **Golden State Warriors**, featuring intense offense and solid defense from both teams.</p>
    
    <p>During the first half, the Lakers held a slight lead, with LeBron James making key plays, while Stephen Curry of the Warriors kept the game tight with impressive three-pointers.</p>
    
    <p>This paragraph is not directly after an h2, so it should not be affected.</p>
    
    <p>In the second half, the Warriors fought back, with Klay Thompson hitting critical shots, but the Lakers secured their win with solid defense and a game-winning dunk by Anthony Davis.</p>
</body>
</html>

Testez-vous

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