CSS Introduction | CSS Selectors | Sibling Selectors

Sibling Selector

Sibling selectors select all elements of a specific type that are siblings and appear after the corresponding element.

A sibling relationship means elements that have the same parent element in the hierarchy of HTML elements. Elements in this relationship are called sibling elements.

General Sibling Selector

The general sibling selector selects all elements of a specific type that are siblings of the corresponding element and appear after it.

The following example selects all <p> tags that are siblings of every <div> tag and appear after the <div> tag.

div ~ p {style;}

<style>
    div ~ p { background-color: #FFE4E1; }
</style>

Adjacent Sibling Selector

In English, adjacent means near or next to. The adjacent sibling selector selects all elements of a specific type that are siblings of the corresponding element and appear immediately after it.

The following example selects all <p> tags that are siblings of every <div> tag and appear immediately after the <div> tag.

div + p {style;}

<style>
    div + p { background-color: #FFE4E1; }
</style>