CSS combinators

Introduction

Styling in CSS is a function of selectors. Selectors are used to target the element for styling, there can be ambiguity in your styling when the relationship between two sectors for styling is not adequately clarified.

The CSS combinators help clarify the relationship between two selectors. A CSS selector can have more than one simple selector, and we can include a combinator between these selectors. However, a combinator combines the selectors to them a useful relationship and the position of the element to be styled in the document.

In this article, you will learn how CSS combinators are used to properly clarify the relationship between two selectors to avoid the wrong targeted element in your styling. Let's get started.

Four essential CSS combinators are important you know for effective web styling. They are:

Descendant Selector (Space)
Direct Child Selector (>)
Adjacent Sibling Selector (+)
General Sibling Selector(~)

Let’s look into each of these, one after the other.

Descendant Selector

The word Descendant indicates a nested element anywhere in the DOM tree. Descendant selectors select elements that are descendants ( Children, grandchildren, etc.) of a specific element. It uses space to separate the two elements.

For example:

 <!--For Example:-->
<div id="app">
        <h3>Heading</h3>
        <p>First Paragraph</p>
        <p>Second Paragraph</p>
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
        </ul>
        <blockquote>practice make perfection</blockquote>
    </dv>
        <style>
            #app p {
            font-size: 25px;
            color: red;
            }
        </style>

This select only all <p> elements that are descendants (nested) of the element with ID “app”.

Note: you can also use div p to combine the selector instead of the ID #app and paragraph tag <p>. But to follow the CSS specificity rule, it is better to use the ID.

Direct Child Selector

This combinator only selects elements that are direct children of a specific element in the DOM tree. It is more specific as compared to the descendant selector because it selects the second selector only when the first selector is its parent. It uses the greater than sign (>) to separate the two elements.

 <!--For Example:-->
<div id=“app”>
        <h3>Heading</h3>
        <p>FirstParagraph</p>
        <p>Second Paragraph</p>
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
        </ul>
        <p>Third Paragraph</p>
    </dv>
        <style>
            #app > p {
            font-size: 25px;
            color: red;
            }
        </style>

This selects all <p> elements that are immediate children of the element <div>

Note: The parent element must always be on the left of the greater than sign (>) and the child on the right side.

Adjacent Selector

Adjacent selector Selects elements that are siblings of a specific element, and come immediately after it. That is elements on the same level as the DOM tree. It uses the plus (+) sign to separate the two elements.

 <!--For Example:-->
<div id=“app”>
    <h1>Heading</h1>
    <p>First Paragraph</p>
    <p>Second Paragraph</p>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
    </ul>
    <p>Third Paragraph</p>
</dv>
<p>Fourth Paragraph</p>
<style>
    h1 + p {
    font-size: 25px;
    color: red;
    }
</style>

This selects only the <p> elements that come immediately after an <h1> element.

General Sibling Selector

This selects elements that are of a specific element but do not have to come immediately after it once they share the same parent element. It is used when you have to select the sibling of an element even if they are not adjacent directly. It uses the slide sign (~) to separate the two elements.

 <!--For Example:-->
<div id=“app”>
        <p>First Paragraph</p>
        <h1>Heading</h1>
        <p>Second Paragraph</p>
        <p>Third Paragraph</p>
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
        </ul>
        <p>Fourth Paragraph</p>
</dv>
        <p>Fifth Paragraph</p>

        <style>
            h1 ~ p {
            font-size: 25px;
            color: red;
            }
        </style>

This selects all <p> elements that come after an <h1> element but not necessarily immediately after.

Wow! You read this to the end, that is awesome. Now that you have learned CSS combinators, what's next is to practice the usage in your project. If you find this article useful. Consider reacting to it with all emojis, leave a comment and share to benefit others.

In the meantime, follow me on Twitter, and GitHub. Let’s connect on LinkedIn

Css Combinators That You Must Know

Introduction