CSS general sibling selector is almost similar to the adjacent sibling selector except that it selects all siblings of the given elements instead of the adjacent sibling only.
To select all the general siblings of an element, put a tilde symbol(~) between the element and the sibling. For example, div ~ p, ul ~ p, etc.
In the example given below, the general sibling selector selects all the <p> elements that are siblings of the <div> element and applies the same styles to each of them.
Example:
div ~ p{
background: yellow;
border: 2px solid blue;
padding: 5px;
}
The general sibling selector in the example below selects all the <p> elements that are siblings of the <ul> element.
Example:
ul ~ p{
background: yellow;
border: 2px solid blue;
padding: 5px;
}
CSS General Sibling Selector Syntax
The general sibling selector has the following syntax:
element ~ general_sibling{
CSS styles
}
Related Pages
CSS Tutorial: CSS Selectors
