CSS - Combinators

Previous
Quiz
Next

CSS Combinators used to specify a particular relationship between selectors so that styling can be done based on relationship between elements in HTML structure. In other words combinators help you target elements based on their position and hierarchy within the HTML document.

For example, with combinators you can style paragraph element that palaced immediately after div element.

Table of Contents


 

Types of Combinators

There are four main types of CSS combinators:

  • Descendant Combinator (whitespace)
  • Child Combinator (>)
  • Adjacent sibling Combinator (+)
  • General sibling Combinator (~)

Now we will look forward to example usage of each of this combinators, before that make sure that you are well versed with CSS selectors.

CSS Descendant Combinator

The descendant combinators are used to select elements that are nested within another element, regardless of how deeply they are nested. These are often represented by a single space (" ").

For example you can target all <p> elements inside the <div> like this:

div p {
   /* CSS styles for all p elements inside div */
}

Similarly we can combine any selectors like classes, id etc. In the following example we combined a element selector with class selector.

Example

Open Compiler
<!DOCTYPE html>
<html>
<head>
    <style>
        .parent {
            background-color: lightblue;
            padding: 20px;
        }
        .parent p {
            color: red;
            font-weight: bold;
        }
    </style>
</head>

<body>
    <div class="parent">
        <h3> This is h3 tag inside parent element </h3>
        <p> This is a p tag inside parent element. </p>
        <p> This is a p tag inside parent element. </p>
    </div>
    <div>
        <p> This is a p tag outside parent element. </p>
    </div>
</body>

</html>

CSS Child Combinator

The child combinator (>) is used to select elements that are direct children of a specified element. It will not select elements that are further nested inside the child elements.

For example, you can target all direct <p> child elements inside the <div> like this:

div > p {
   /* CSS styles for all direct p children inside div */
}

Similarly, we can combine any selectors like classes, ids, etc. In the following example, we style all the p tags inside class parent.

Example

Open Compiler
<!DOCTYPE html>
<html>
<head>
    <style>
        .parent {
            background-color: lightgreen;
            padding: 20px;
        }
        .parent > p {
            color: blue;
            font-weight: bold;
        }
    </style>
</head>

<body>
    <div class="parent">
        <h3> This is an h3 tag inside parent. </h3>
        <p> This is a direct p tag inside  parent. </p>
        <p> This is another direct p tag inside parent. </p>

        <div>
            <p> 
                This is a p tag nested inside a div in parent element. 
            </p>
        </div>
    </div>

    <div>
        <p> This is a p tag outside parent element. </p>
    </div>
</body>

</html>

CSS Adjacent Sibling Combinator

The adjacent sibling combinator (+) is used to select an element that is immediately preceded by a specified element. It only affects the element that directly follows the specified element.

For example, you can target a <p> element that immediately follows an <h3> element like this:

h3 + p {
   /* CSS styles for the p element immediately following an h3 */
}

In the following example, we target the <p> element that comes right after an <h3> element.

Example

Open Compiler
<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            padding: 20px;
            background-color: lightyellow;
        }
        h3 + p {
            color: purple;
            font-style: italic;
        }
    </style>
</head>

<body>
    <div class="container">
        <h3>This is an h3 tag</h3>
        <p> 
            This is a p tag that immediately follows the h3 tag.
        </p>
        <p>
            This is another p tag, but it is not immediately 
            after the h3 tag.
        </p>
    </div>
</body>

</html>

CSS General Sibling Combinator

The general sibling combinator (~) is used to select all elements that are siblings of a specified element and appear after it in the HTML structure. It will select all matching siblings, not just the one immediately following.

For example, you can target all <p> elements that follow an <h3> element like this:

h3 ~ p {
   /* CSS styles for all p elements following an h3 element */
}

In the following example, we target all <p> elements that are siblings of an <h3> element and appear after it.

Example

Open Compiler
<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            padding: 20px;
            background-color: #f0f0f0;
        }
        h3 ~ p {
            color: darkorange;
            text-decoration: underline;
        }
    </style>
</head>

<body>
    <div class="container">
        <p> This is a p tag before h3 tag </p>
        <h3> This is an h3 tag </h3>
        <p> This is a p tag that follows the h3 tag. </p>
        <p> This is another p tag that also follows the h3 tag. </p>
        <div> This is a div tag. </div>
        <p> This is a p tag after div tag </p>
    </div>
    <p> This is a p tag after h3 tag outside container. </p>
</body>

</html>

Combining Multiple Combinators

In CSS, you can combine multiple combinators to create more complex and specific selectors. By combining different combinators, you can target elements based on more complex relationships within the HTML structure.

For example, you can target a <p> element that is a direct child of a <div> and immediately follows an <h3> element like this:

div > h3 + p {
   /* CSS styles for p elements that are direct children of a div and 
      immediately follow an h3 element */
}

In the following example, we combine the child combinator with the adjacent sibling combinator to target anchor elements inside navigation menu.

Example

Open Compiler
<!DOCTYPE html>
<html>
<head>
    <style>
        nav {
            padding: 10px;
            background-color: #f0f0f0;
        }
        ul {
            list-style-type: none;
            padding: 0;
        }
        ul > li {
            display: inline-block;
            margin-right: 15px;
        }
        ul > li + a {
            color: red;
            text-decoration: underline;
        }
        ul > li > a {
            color: blue;
            text-decoration: none;
        }
    </style>
</head>

<body>
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Services</a></li>
            <a href="#">Contact</a>
        </ul>
    </nav>
</body>

</html>
Print Page
Previous
Next
Advertisements