CSS Combinators

❮ Prev Next ❯

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:

Descendant selector
Adjacent sibling selector (+)
General sibling selector (~)
Child selector
First child selector ( :first-child )
Last child selector ( :last-child )
Only child selector ( :only-child )
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 is used to select the first child element of the specified selector.

Depending on how you write it, it can select the first child of the specified selector or the first child of the specified selector's parent.

It is written as :first-child.

For example:

div :first-child will select the first child elements of div elements
div:first-child will select the first child of its parent that is div element

Note: There only difference of space in above concept but meaning is totally different.

Example

/* select first child of div */
div :first-child{
    font-size: 1.5em;
    background-color: pink;
}

/* select first child of its parent */
.parent div:first-child{
    font-size: 1.5em;
    background-color: lightgreen;
}

Try it

6. Last child selector

The last child selector is used to select the last child element of the specified selector.

Just like :first-child, it also depend on how you write it, it can select the last child of the specified selector or the last child of the specified selector's parent.

It is written as :last-child.

div :last-child will select the last child elements of div elements
div:last-child will select the last div element of its parent

Note: There only difference of space in above concept but meaning is totally different.

Example

/* select last child of div */
div :last-child{
    font-size: 1.5em;
    background-color: pink;
}

/* select last child of its parent */
.parent div:last-child {
    font-size: 1.5em;
    background-color: lightgreen;
}

Try it

7. Only child selector

The only child selector selects the element that is the only child of the specified selector.

It is written as :only-child.

For example p:only-child will select all the p elements that are the only child of their parent.

Example

p:only-child{
    font-size: 1.5em;
    background-color: pink;
}

Try it

8. Nth child selector

The nth-child selector selects the element that is the nth child of the specified selector.

It is written as :nth-child().

For example p:nth-child(2) will select all the p elements that are the second child of their parent.

Example

p:nth-child(2){
    font-size: 1.5em;
    background-color: pink;
}

Try it

❮ Prev Next ❯