Selector API - Sibling selector (adjacency - before after)

About

selection of sibling (ie node that share the same parent in the document tree)

If you want to add a sibling in the DOM, see DOM sibling manipulation

Syntax

There is two sibling selector selection:

  • Next sibling with the wildcard (+)
  • Following sibling with the wildcard (~)

Next

A Adjacent / Next-sibling selector matches if:

  • E1 and E2 share the same parent in the document tree (sibling)
  • and E1 immediately precedes E2, ignoring non-element nodes (such as text nodes and comments).
element1 + element2

where:

Example:

div+div{
  color: red
}
<div>Hello</div>
<div>The red sibling</div>

Following

element1 ~ element2

where:

  • The element 1 must be above the element 2
  • The element 2 does not need to be the next sibling but in another position in the list

Example:

div~div{
  color: red
}
<div>Hello</div>
<p>A paragraph</p>
<div>The red sibling</div>

Powered by ComboStrap