CSS - General Sibling Selectors

General Sibling Selectors in CSS

CSS general sibling selector ( "" ) selects all the elements that are siblings of a specified element sharing the same parent. It will select all matching siblings, not just the one immediately following. Atilde ( "" )symbol is used to denote the general sibling.

Syntax

The syntax for CSS general sibling selectors is as follows:

selector1 ~ selector2 {

    /* property: value; */

    color: #04af2f

}

Example of General Sibling Selectors

In this example, we have usedgeneral sibling selectorto change the textcolorof allpelements that are immediate siblings of thedivelement.

Example 2

In this example, we have used a general sibling selector to change thebackground colorand font of all the p elements after the h3 tag.