A closer look at CSS combinators
Tags: html, css
Published: 2020-10-11 19:23:05

---
title: A closer look at CSS combinators
published: true
description: In this article we talk about CSS combinators
tags: html,  css
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/r8bjbd3u8qjrk9nyxyd3.jpg
---

## __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?](#what-are-combinators)
* [Descendant combinator](#descendant-combinator)
* [Child combinator](#child-combinator)
* [Adjacent sibling combinator](#adjacent-sibling-combinator)
* [General sibling combinator](#general-sibling-combinator)
* [A note on combinators](#a-note-on-combinators)
* [Summary](#summary)
* [Conclusion](#conclusion)

## __What are Combinators? <a name="what-are-combinators"></a>__

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 <a name="descendant-combinator"></a>__

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.

```css
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 <a name="child-combinator"></a>__

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.

```css
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.

```html
<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 <a name="adjacent-sibling-combinator"></a>__

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. `+`

```css
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`.

```html
<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 <a name="general-sibling-combinator"></a>__

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.

```css
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__.

```html
<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 <a name="a-note-on-combinators"></a>__

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 <a name="summary"></a>__

| 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 <a name="conclusion"></a>__

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).