Explore 100's Of Free Video Tutorials

Keep Learning, Keep Coding & Keep Sharing

CSS

CSS Adjacent Sibling Selector

Notes:

CSS - Adjacent Sibling (+) Selector or Next Sibling Selector:
It selects any HTML element targeted by the selector written after the + character, which is/are sibling of and immediately preceded by any HTML element targeted by the selector written before the + character.

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

To implement adjacent sibling selector, in place of selector; we write selectors one beside another separated by + (plus) sign

Syntax of Adjacent Sibling (+) Selector:
selector1 + selector2
{
declaration list;
}
It selects any HTML element targeted by the selector2, which is sibling of and immediately preceded by any HTML element targeted by the selector1

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

Interview Questions: