Explore 100's Of Free Video Tutorials

Keep Learning, Keep Coding & Keep Sharing

CSS

CSS General Sibling Selector

Notes:

CSS - General Sibling (~) Selector:
It selects any HTML element targeted by the selector written after the ~ character, which is/are sibling of and need not be immediately preceded by but should be preceded by any HTML element targeted by the selector written before the ~ character.

Syntax of CSS rule-set / rule:
selector
{
declaration list;
}

To implement general sibling selector, in place of selector; we write selectors one beside another separated by ~ (tilde) character

Syntax of Generic Sibling (~) Selector:
selector1 ~ selector2
{
declaration list;
}

It selects any HTML element targeted by the selector2, which is sibling of and need not be immediately preceded by but should be preceded by any HTML element targeted by the selector1

Ex: General sibling selector:
h2 ~ p
{ border:2px solid red;
}
It selects any p element which is sibling of and need not be immediately preceded by but should be preceded by any h2 element

Ex: Adjacent sibling selector:

h2 + p
{
border:2px solid red;
}
It selects any p element which is sibling of and should be immediately preceded by any h2 element.

Interview Questions: