Tutorials Tonight
Follow Us

CSS COMBINATORS


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

There are many different types of combinator selectors in CSS. Here are 8 most used of them:

  1. Descendant selector
  2. Adjacent sibling selector (+)
  3. General sibling selector (~)
  4. Child selector
  5. First child selector ( :first-child )
  6. Last child selector ( :last-child )
  7. Only child selector ( :only-child )
  8. Nth child selector ( :nth-child() )

1. Descendant selector

The descendant selector is used to select all the elements that are descendants of a specified element.

A descendant combinator is written by a combination of two or more selectors separated by a space. The first selector is the parent element and the second selector is the child element.

For example, div ul li will select all the li elements that are descendants of ul elements that are descendants of div elements.

Example

/* descendent selector */
div ul li{
    background-color: pink;
    margin-top: 10px;
}
▶ Try it

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 a plus (+).

For example, h2 + p will select all the p elements that are immediately after by h2 elements.

Example

/* adjacent sibling selector */
h2 + p {
    font-size: 1.5em;
    background-color: pink;
}
▶ Try it

3. General sibling selector

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

This combinator is written by a combination of other selectors separated by a tilde (~).

For example div ~ p will select all the p elements that are siblings of div elements.

Example

div ~ p{
    font-size: 1.5em;
    background-color: pink;
}
▶ Try it

4. 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 a combination of other selectors separated by greater than (>).

For example div > p will select all the p elements that are the child of div elements.

Example

div > p{
    font-size: 1.5em;
    background-color: pink;
}
▶ Try it

5. First child selector

The first child selector selects all the elements that are the first child of the specified selector.

It is written as :first-child.

For example div :first-child will select all the first child elements of div elements.

Example

div :first-child{
    font-size: 1.5em;
    background-color: pink;
}
▶ Try it

6. Last child selector

The last child selector selects all the elements that are the last child of the specified selector.

It is written as :last-child.

For example div :last-child will select all the last child elements of div elements.

Example

div :last-child{
    font-size: 1.5em;
    background-color: pink;
}
▶ Try it

7. Only child selector

The only child selector selects all the elements that are the only child of the specified selector.

It is written as :only-child.

For example div :only-child will select all the only child elements of div elements. If there are more than one child element then it will not select any element.

Example

div :only-child{
    font-size: 1.5em;
    background-color: pink;
}
▶ Try it

8. Nth child selector

The nth-child selector selects all the elements that are the nth child of the specified selector.

It is written as :nth-child().

For example div :nth-child(2) will select all the second child elements of div elements.

Example

div :nth-child(2){
    font-size: 1.5em;
    background-color: pink;
}
▶ Try it