General Sibling Selectors Code Example

Last Updated On Saturday 4th Dec 2021
  • The general sibling selector is similar to the adjacent sibling selector (E1 + E2), but it is less strict.
  • A general sibling selector comprises two simple selectors separated by the tilde (∼) character.
  • It can be written like: E1 ∼ E2, where E2 is the target of the selector.

Css Tilde Selector

  • The selector h2 ∼ p in the example below will select all the <p> elements preceded by the <h2> element.
  • All the elements share the same parent in the document tree.
	h2 ∼ p {
  color: green;
  font-size: 1.8rem;
}