CSS General Sibling Selector

The CSS General Sibling Selector selects all matching sibling elements that appear after a specified element and share the same parent. It uses the tilde symbol (~) between two selectors.

Unlike the CSS Adjacent Sibling Selector, which selects only the immediately following matching sibling, the general sibling selector can select multiple matching siblings.

CSS General Sibling Selector Syntax

The syntax is:

previous-element ~ following-element {
    property: value;
}

The first selector identifies the reference element, while the second identifies the sibling elements to style.

CSS General Sibling Selector Example

<!DOCTYPE html>
<html>
<head>
    <title>General Sibling Selector</title>
    <style>
        h2 ~ p {
            color: blue;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <h2>CSS Tutorials</h2>
    <p>This paragraph appears blue.</p>
    <div>A section of content.</div>
    <p>This paragraph also appears blue.</p>
    <p>This paragraph appears blue too.</p>
</body>
</html>

In this example, h2 ~ p selects every paragraph that appears after the <h2> and shares the same parent. The <div> does not prevent later paragraphs from being selected.

Using the General Sibling Selector with Classes

You can combine the general sibling selector with classes to style specific elements.

<div class="content">
    <h3>Learn CSS</h3>
    <p>Understand CSS selectors.</p>
    <p>Practice with code examples.</p>
</div>

h3 ~ p {
    color: green;
}

Both paragraphs become green because they are sibling elements that appear after the heading.

Learn more about CSS Class Selectors and CSS Descendant Selectors.

General Sibling Selector vs. Adjacent Sibling Selector

Feature	General Sibling (`~`)	Adjacent Sibling (`+`)
Symbol	`~`	`+`
Elements selected	All matching later siblings	Only the immediately following matching sibling
Example	`h2 ~ p`	`h2 + p`

For example, h2 ~ p selects all later paragraph siblings, while h2 + p selects only the paragraph immediately following the heading.

When to Use the General Sibling Selector

The general sibling selector is useful when you need to style multiple elements based on their position after another element. You can use it for content sections, form elements, and other webpage layouts where sibling relationships matter.

Explore our CSS Selectors tutorial to learn more about targeting HTML elements with CSS.