CSS Combinators

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





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 targets every specified sibling that follows.


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 would look like this :




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

Output
 General Sibling Combinator
Try It Now

Adjacent Sibling Combinator

The plus sign combinator is called an adjacent sibling combinator. And selectors that use them are called adjacent sibling selectors because they target an elements next sibling on the page. So the one that immediately follows the element.

This example will apply the specified styles only to paragraph elements that immediately follow other paragraph elements. This means the first paragraph element on a page would not receive these styles. Also, if another element appeared between two paragraphs, the second paragraph of the two wouldn't have the styles applied.

Example

Let us see what the CSS code for this looks like:



So, if we apply this selector to the following HTML:


After applying the CSS to the above HTML, it will produce the following result

Output
Adjacent Sibling Combinator
Try It Now

Using combinators
  • The > combinator targets a direct child of an element
  • The + combinator targets an element's immediate sibling
  • The ~ combinator targets all the specified siblings that follow an element

CSS Selectors Refrence

CSS Selectors Reference

Other CSS Selectors you might want to learn

CSS Id Selector

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