CSS General Sibling Combinator

Last Updated Jul 21, 2015, 12:00:06 PM





CSS General Sibling Combinator

The tilde symbol is called a general sibling combinator Because it targets siblings, but this time it not only targets an immediate sibling, it actually targets every specified sibling that follows.
Syntax

This type of selector is declared using the tilde character (~). In this example, all paragraph elements (<p>) will be styled with the specified rules, but only if they are siblings of <h2> elements. There could be other elements in between the <h2>and<p>, and the styles would still apply.

Example

The CSS code for this looks like:



After applying the css to the above html, it will produce the following result

Output
 General Sibling Combinator
Watch GIF Try It Now

Other CSS Selectors you might want to learn

CSS Class Selector

CSS Group Selector

CSS Child Combinator

CSS General Combinator

CSS Adjacent Combinator



Sources and Credits

The source of the content has been referred and updated with Mozilla Foundation and W3C Organization

Last Updated Jul 21, 2015, 12:00:06 PM