Adjacent Sibling Selector

Part of the CSS Mastery section of Coddy's HTML journey — lesson 4 of 43.

The adjacent sibling selector (+) is used to style an element that comes right after a specific element. Both of them must have the same parent, and "adjacent" means "immediately next to each other."

For example:

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

With this CSS:

h2 + p {
  font-weight: bold;
}

The paragraph is styled because it directly follows an h2 element.

Test yourself

This lesson includes a short quiz. Start the lesson to answer it and track your progress.

Test yourself

This lesson includes a short quiz. Start the lesson to answer it and track your progress.

Challenge

Easy

Create a CSS selector that targets only the paragraphs (<p>) that directly follow an <h2> element describing a basketball game. Style these paragraphs with a blue font color and 18px font size.

Cheat sheet

The adjacent sibling selector (+) styles an element that comes immediately after a specific element. Both elements must have the same parent.

Syntax:

element1 + element2 {
  /* styles */
}

Example:

h2 + p {
  font-weight: bold;
}

This targets paragraphs that directly follow an h2 element.

Try it yourself

<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>

Test yourself

This lesson includes a short quiz. Start the lesson to answer it and track your progress.