Tutorials Tonight's Logo

CSS COMBINATORS


CSS combinators is a combination of two or more other selectors and creates a relationship between them. The combinators also provide location of the content in the HTML document and is used to target specific elements to style.

There are four types of selector in CSS:

  1. Descendant selector
  2. Adjacent sibling (+)
  3. Child selector (>)
  4. General sibling selector (~)


1).Descendant selector

The descendant selector selects all the elements that are children of specified previous selectors.

This combinator is written by a combination of other selectors separated by space.

Example - div ul li This will select all li elements which are nested inside ul and ul is nested inside div elements.


2).Adjacent sibling

The adjacent selector selects the elements that are adjacent to the specified selector. Here adjacent means immediately after the specified selector.

This combinator is written by a combination of other selectors separated by plus (+).

Example - h2 + p This will select p element if it is immediately after h2 element.


3).Child selector

The child selector selects all the elements that are the child of the specified selector. Here adjacent means immediately after the specified selector.

This combinator is written by combination of other selectors and greater than (>) symbols in between.

Example - div > p This will select div as parent and select all the p elements that are their own children of it.


4).General sibling selector

The general sibling selector selects all the sibling elements that follows the first selector element.

This combinator is written by combination of other selectors and tilde (~) symbol in between.

Example - div ~ p This will select p element that are siblings of div element.