CSS Combinators

CSS Combinators: Here, we are going to learn about the Combinators in CSS (Cascading Style Sheet) with Examples.
Submitted by Anjali Singh, on February 01, 2020

Combinators in CSS are used to explain a relationship between two selectors. A selector can be simple to complex and we can combine any two selectors through combinator.

There are four different combinators in CSS,

General sibling selector (~)
Adjacent sibling selector (+)
Child selector (>)
Descendant selector (space)

Let us understand these combinators one by one...

1) General sibling selector (~)

It is denoted by ~. The general sibling selector as its name suggests is useful to select the elements that are the sibling to a specified element. This can also be used to select the elements who share the same parent element.

Syntax:

    element1 ~ element2{
        //CSS styling
    }

Example:

<!DOCTYPE html>

<html>

<head>
    <style>
        div ~ p {
            font-weight: bold;
            background-color: #f40;
            color: #fff;
            font-size: 32px;
        }
    </style>
</head>

<body>
    <p>A</p>
    <div>
        <p>B</p>
    </div>
    <p>C</p>
    <p>D</p>
</body>

</html>

Output

In the above example, two <p> are selected i.e. "C" and "D" because they are a sibling to specified element <div>.

2) Adjacent sibling selector (+)

It is denoted by +. As its name suggests adjacent sibling selector is used to selecting the element that is adjacent to a specified element. This combinator only selects one element that is next to a specified tag.

Syntax:

    element1 + element2{
        //CSS styling
    }

Example:

<!DOCTYPE html>

<html>

<head>
    <style>
        div + p {
            font-weight: bold;
            background-color: #f40;
            color: #fff;
            font-size: 32px;
        }
    </style>
</head>

<body>
    <p>A</p>
    <div>
        <p>B</p>
    </div>
    <p>C</p>
    <p>D</p>
</body>

</html>

Output

In the above example, the <p> i.e. "C" is selected as it is a sibling to the specified element <div>.

3) Child selector (>)

It is denoted by >. The child selector selects all the elements that are children of a specified element. It can select more than one element.

Syntax:

    element1 > element2{
        //CSS styling
    }

Example:

<!DOCTYPE html>

<html>

<head>
    <style>
        div > p {
            font-weight: bold;
            background-color: #f40;
            color: #fff;
            font-size: 32px;
        }
    </style>
</head>

<body>
    <p>A</p>
    <div>
        <p>B</p>
    </div>
    <p>C</p>
    <p>D</p>
</body>

</html>

Output

In the above example <p> element selected as it is a child of the specified element <div>.

4) Descendant selector (space)

It is denoted by space between two elements. The descendant selector selects all the elements that are descendant to a specified element. This combinator is useful to combine the two selectors such that selected elements have an ancestor the same as the first selector element.

Syntax:

    element1  element2 {
        //CSS styling
    }

Example:

<!DOCTYPE html>

<html>

<head>
    <style>
        div p {
            font-weight: bold;
            background-color: #f40;
            color: #fff;
            font-size: 32px;
        }
    </style>
</head>

<body>
    <p>A</p>
    <div>
        <p>B</p>
    </div>
    <p>C</p>
    <p>D</p>
</body>

</html>

Output

In the above example <p> is selected because it is a descendant of specified element <div>.