A closer look at CSS combinators

Introduction

In CSS, you have multiple options when it comes selecting HTML elements on a web page. These options are called selectors. Some selectors are quite popular and more used than others and the popular ones are what every developer learns when starting out with CSS. In this article you'll learn about one of the least popular selectors called CSS Combinators.

Table of contents

• What are combinators?
• Descendant combinator
• Child combinator
• Adjacent sibling combinator
• General sibling combinator
• A note on combinators
• Summary
• Conclusion

What are Combinators?

Combinators selectors combine selectors in the way that it is evident some relationship exists between the selectors.

The combinators are classified into four groups:

• Descendant combinator
• Child combinator
• Adjacent sibling combinator
• General sibling combinator

Descendant combinator

The word "descendant" should give you an idea that for the combinator to match any element, an ancestor element must exist. The least being a parent element.

main p {
    font-size: 1.2em;
}

In the code snippet above, main is the parent element and p is a child element therefore, this selector will match all p which are descendants of main and nothing else.

Child combinator

The child combinator is represented by >, and this symbol is placed between two selectors (or more). It will only match an element if the second selector is a direct child of the first selector.

main > p {
    font-size: 1.2em;
}

The selector above will match paragraphs that are direct children of main and nothing else. Therefore, if there is any containing element like a div or and article with a paragraph within it, this selector will not match them.

<main>
    <p>
        This paragraph is selected.
    </p>
    <article>
        <p>
        But not this paragraph.
        </p>
    </article>
    <p>
        Also, this is selected.
    </p>
</main>

Adjacent sibling combinator

This combinator matches an element if it is next to an element in a document hierarchy. It is represented by the addition symbol in mathematics i.e. +

main + p {
    font-size: 2em;
    background-color: #000000;
    color: #ffffff;
}

This will match paragraphs that is next to main in the HTML markup and not paragraphs within main.

<main>
    <p>
        This paragraph is not selected.
    </p>
    <p>
        Also, this is not selected.
    </p>
</main>
<p>
    But this is selected.
</p>
<p>
    This is also not selected.
</p>

General sibling combinator

This combinator is represented by the tilde sign ~. When this combinator is used between two selectors, all occurrence of the second selector are matched even if they are not adjacent to the first selector.

main ~ p {
    font-size: 2em;
    background-color: #000000;
    color: #ffffff;
}

Unlike the adjacent sibling selector that selects one sibling after the first selector, this combinator selects all occurrence of elements matched by the second selector which occurs after the first selector in the document hierarchy.

<main>
    <p>
        This paragraph is not selected.
    </p>
    <p>
        Also, this is not selected.
    </p>
</main>
<p>
    But this is selected.
</p>
<p>
    Also, this.
</p>
<p>
    And this.
</p>

A note on combinators

Combinators are extremely useful when you intend to target specific parts of your document, but it's difficult to reuse the CSS code elsewhere because it's solely for that specific part in your HTML document. It is advisable to create classes with semantic names that are reusable.

Summary

Combinator	Sign	Example	Location of matched element	Number of matched element
Descendant combinator	space	main p	Within the first selector	All occurrence of the second selector within the first selector.
Child combinator	>	main > p	Within the first selector	All occurrence of the second selector that is a child of the first selector only.
Adjacent sibling combinator	+	main + p	Outside the first selector	The first occurrence of the second selector after the first selector in the document hierarchy.
General sibling combinator	~	main ~ p	Outside the first selector	All occurrence of the second selector after the first selector in the document hierarchy.

Conclusion

In this article we discussed combinator selectors which is a class of CSS selectors that are sparingly used compared to class selectors and ID selectors but sometimes come in handy when the markup is not large (and hopefully not) and you have no control over the HTML markup e.g. when it is generated by a Content Management System (CMS).