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:
