CSS Combinators — A type of complex CSS selectors

Today, in this blog, we’re going to learn something very basic in CSS yet very useful and a must-know topic. It’s CSS Combinators !!

We will understand CSS Combinators by covering the different types, with an example of each type, and will also learn their importance, by combining them with other selectors.

Before diving deep into the topic, let’s go through CSS selectors quickly, as CSS Combinators are nothing but a type of CSS selectors.

A CSS selector selects the HTML element(s) according to their ID, class, type, attribute, etc. CSS selectors target and select the HTML elements we want to style.

There are different types of selectors, each with its unique syntax. CSS combinators are one of them.

CSS combinator is a type of CSS selector, which combines two CSS selectors by including a relationship/combinator between them, to uniquely select element(s) in an HTML document.

In simple words, a CSS combinator combines two CSS selectors to form a new hybrid CSS selector, by adding a relationship between them.

CSS Combinator syntax

selector (combinator) selector {
 styles;
}

Types of CSS Combinators

descendant selector (space)
child selector (>)
adjacent sibling selector (+)
general sibling selector (~)

css_combinators_type

Below is the HTML template that we will use, to apply the CSS style using all the CSS combinators one by one. The output screenshots will be added next to the CSS code snippets, to help us understand the concept better.

<body>
  <h2>CSS Combinators examples</h2>
  <section>
    <p>This is paragraph 1</p>
    <div>
      <p>This is paragraph 2</p>
      <div>
        <p>This is paragraph 3</p>
      </div>
    </div>
    <p>This is paragraph 4</p>
  </section>
  <p>This is paragraph 5</p>
  <p>This is paragraph 6</p>
</body>

Now let’s go through all the types of CSS combinators one by one. Shall we?

Descendant Selector (space)

The descendant selector selects all the successors of a specified element. Successors include all the children of an element (direct child or a child multiple levels down the DOM tree).

In the following example, the combinator selector selects all <p> inside <section>, direct children as well as grandchildren.

descendant_selector

Child Selector (>)

The child selector selects all the direct children of a specified element.

In the following example, the combinator selector selects all the<p> that are direct children of <section>.

child_selector

Adjacent Sibling Selector (+)

The adjacent sibling selector selects an element that is adjacent/immediately after a specified part.

In the following example, the combinator selector selects the<p> which is an immediate sibling of<section>.

adjacent_sibling_selector

General Sibling Selector (~)

The general sibling selector selects all the siblings of a specified element that share the same parent.

In the following example, the combinator selector selects all the<p> which are siblings of<section>.

general_sibling_selector

Do you want to test it by yourself?

Click here.

Now that we have learned CSS Combinators, let’s see how to combine them with other CSS selectors. Shall we?

Using CSS combinators with other selectors

The selector that we’re going to combine with CSS combinators is CSS Pseudo Classes. I am assuming you’re aware of them and have already used them before. If not, I would suggest going through them once before continuing with this blog.

Our example is going to have a basic table with a background colour applied to each cell.

<body>
  <table>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
    </tr>
  </table>
</body>

To apply background colour to the cells, we will use the child selector (>) combinator, since we want to select all the direct cells (<td>) of each row (<tr>) and apply the background colour.

css_combinators_with_other_selectors_1

Now, let’s say we want to apply different background colours to all the odd indexed cells. We can achieve that by combining the child selector (>) combinator with the “nth-of-type()” pseudo-class.

css_combinators_with_other_selectors_2

Here, first, we select all the direct cells of each row and out of all the selected cells, we select every cell that is the odd cell of its parent row by passing the “odd” keyword.

Now, if we want to change the background colour of a specific cell (let’s say the 2nd last cell of the last row), we can achieve that by combining the child selector (>) combinator with the “last-child” and “nth-last-of-type()” pseudo-classes.

css_combinators_with_other_selectors_3

Do you want to test it by yourself?

Click here.

Conclusion

CSS combinators are helpful in cases where we want to style specific elements all at once rather than styling them individually. CSS combinators will also be useful in cases where we want to style element(s) but are unable to access the HTML, perhaps due to it being generated by a CMS.

That’s it for this blog. I hope you liked it, and that it was helpful for you. Thanks for reading!