General Sibling Selector

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

The general sibling selector (~) selects all elements that are siblings of a specified element and come after it.

For example:

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

With this CSS:

h2 ~ p {
  color: blue;
}

After applying this CSS, the result will be:

Paragraph 1 remains unchanged (it's not a sibling that comes after h2)

Paragraph 2 becomes blue (it's a sibling that comes after h2)
Paragraph 3 becomes blue (it's a sibling that comes after h2)

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 rule using the general sibling selector to make all <p> elements that come after the <h1> light up in bright pink (#ff69b4).

Cheat sheet

The general sibling selector (~) selects all elements that are siblings of a specified element and come after it.

h2 ~ p {
  color: blue;
}

This selects all <p> elements that are siblings of <h2> and come after it in the HTML structure.

Try it yourself

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

Test yourself

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