Selector API - Sibling selector (adjacency - before after)

> (World Wide) Web - (W3|WWW) > Selector API

1 - About

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

3 - Syntax

  • Next-sibling (+)
  • Following-sibling (~)
Advertising

3.1 - 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>

3.2 - 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>

Advertising