📖 Sibling Selector

In CSS and JavaScript selector, there is 2 sibling selector to select elements within the same level, next to the first element. They are adjacent sibling selector and general sibling selector.

Adjacent sibling selector

Adjacent sibling selector selects B element that immediately follows the first specified element (A). A and B needs to share the same parent—at the same indentation level.

A + B

Detail documentation from MDN: https://developer.mozilla.org/en/docs/Web/CSS/Adjacent_sibling_selectors

Demo:

See the Pen CodePen.

General sibling selector

General sibling selector selects B elements that are after the first selector (A). A and B needs to share the same parent—at the same indentation level.

A ~ B

Detail documentation from MDN: https://developer.mozilla.org/en/docs/Web/CSS/General_sibling_selectors

Demo:

See the Pen CodePen.