Selecting HTML elements with CSS combinators
Tags: html, css, webdev, beginners
Published: 2022-10-15 23:31:00

### Hey there :wave:
In this article, we will discuss CSS combinators. Which are a type of CSS selectors.


### My Previous Articles :rocket:
This is the third part of my [CSS selectors series](https://dev.to/teejay128/series/20085) if you do not already know the basics of CSS selectors. Be sure to check them out before reading this article.


### What are combinators

Combinators are CSS selectors that select elements based on the relationship between the selectors of two elements.

Combinators are applied within two selectors, and if the relationship between the first and second element is as defined by the combinator, then the second element is styled.



### Types of combinators
There are four types of CSS selectors
- ### Descendant Selector (" ")
    
    Syntax: `Element Descendant`

    Descendant selectors select elements that are children, grandchildren, great-grandchildren, and so on, of the selected elements.

    An element is selected if it can be found anywhere within the parent element. Even if it is nested in a different element.
    
    It is represented by a single space (" ") between the 2 selectors.

    Example:
    ```
    div p{
        color: blue;
    }
    ```
    This example changes the text color of `p` elements that can be found inside a `div` element.

    ```
    <h1>This is a header</h1>
    <p>This is outside a div element</p>

    <div>
        <h2>This is a header</h2>
        <p>This is inside a div element</p>

        <ul>
            <li>This is a list item</li>
            <p>This is a p tag inside an element that is inside a div element</p>
            <li>This is a list item</li>
            <p>This is a p tag inside an element that is inside a div element</p>
        </ul>
    </div>

    <p>This is outside a div element</p>
    ```
    Result: The results will be displayed in a codepen towards the end of the article.
    <!-- All div p are colored blue -->

    Even `p` elements that are inside the `ul` element are also selected. This is because the `ul` element is a child of the `div` element and that makes the `p` elements within the `div` elements grandchildren of the `div` element, hence they are also selected.



- ### Child Selector (">")
    Syntax: `Element > Child`

    Child selectors or direct descendants select **only** the direct children of an element.

    If the element is nested within another element, it is not selected.

    It is represented with a right-angle bracket `>` between the two elements.

    Example:
    ```
    div > p{
        color: red;
    }
    ```
    This example changes the text color of only the `p` elements that are children of `div` elements.
    
    ```
    <h1>This is a header</h1>
    <p>This is outside a div element</p>

    <div>
        <h2>This is a header</h2>
        <p>This is inside a div element</p>

        <ul>
            <li>This is a list item</li>
            <p>This is a p tag inside an element that is inside a div element</p>
            <li>This is a list item</li>
            <p>This is a p tag inside an element that is inside a div element</p>
        </ul>
    </div>

    <p>This is outside a div element</p>
    ```
    Result: The results will be displayed in a codepen towards the end of the article
    Only `p` elements that are children of `div` elements are selected, and the `p` elements that are inside the `ul` are not affected.



- ### Adjacent Sibling Selector ("+")

    Syntax: `Element + sibling`

    Adjacent sibling selectors select adjacent siblings, that is elements that **share the same parent** and come **immediately after** the element.

    If there is an element of a different type between the element and the sibling, then the sibling is not selected.

    It is represented with a plus sign `+` between the two elements.
    Example:
    ```
    h1 + p{
        border: 2px solid black
    }
    ```
    This example adds a border around all `p` elements that come immediately after an `h1` element.
    ```
    <h1>This is a header</h1>
    <p>This paragraph comes after a header</p>
    <p>This is a paragraph</p>

    <h1>This is a header</h1>
    <span>This is a span</span>
    <p>This is a paragraph</p>

    <div>
        <h1>This is a header</h1>
        <p>This paragraph comes before a header</p>

        <h2>This is a header</h2>
    </div>
    ```
    Result: The results will be displayed in a codepen towards the end of the article.
    Only the `p` elements that come after an `h1` element are styled, and all other `p` elements are omitted from the styling.


- ### General sibling selector ("~")
    Syntax: `Element ~ sibling`

    General sibling selectors select **all** elements that come after a particular element.

    If there is an element of a different tag, between the 2 elements, it still selects them.

    It is represented by the tilde sign `~`,(the button right under the `Esc` key on your keyboard, pressing shift + the key will give you the tilde sign).
    
    Example:
    .limit ~ li{
        text-decoration: line-through;
    }

    This example adds a line through all `li` elements that come after the element with the class of "limit".
    ```
    <ul>
        <li>List item 1</li>
        <li>List item 2</li>
        <li class="limit">List item 3</li>
        <li>List item 4</li>
        <li>List item 5</li>
        <ul>
            <li>Nested item 1</li>
            <li>Nested item 2</li>
        </ul>
        <li>List item 6</li>
        <li>List item 7</li>
    </ul>
    ```
        Result: The results will be displayed in a codepen towards the end of the article.
    All elements after the element with a class of "limit" receive the styling, even those that are separated by a nested list.


### Conclusion :grin:
CSS combinators select elements indirectly, so you should be careful when using them.

They can also be used with any type of selector(simple or attribute)

#### Note that the comma `,` is not a combinator
The comma is used to separate selectors in a selectors list

Here is a codepen where the effects of the different combinators are shown.

<p class="codepen" data-height="612.5" data-default-tab="html,result" data-slug-hash="dyerQNO" data-user="teejay128" style="height: 612.5px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>This is the pen containing all the results of the above code examples<a href="https://codepen.io/teejay128/pen/dyerQNO">
  Results</a> by Joseph Taiwo (<a href="https://codepen.io/teejay128">@teejay128</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

Also check out [MDN web docs](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators) and [w3schools](https://www.w3schools.com/css/css_combinators.asp) for further knowledge on CSS combinators


Although I did my research, I may still be missing out on some things since I decided to make this article a short one, feel free to drop a comment on anything, be it a correction or something I missed out. 


### Thank you for reading (^_^) :heart: