tutorialstonight logo
A Platform To Learn To Code

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.

Example

Run the code

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.

Example

Run the code

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.

Example

Run the code

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.

Example

Run the code





BOX

BOX