Hello Sunil
Understanding CSS Combinators

CSS Selectors – Understanding CSS Combinators

In our last post, we went over simple selectors which includes selecting your CSS style by type, id, class, universal and grouping selectors. In this post we are going to discuss CSS combinators.

But the obvious question – What is CSS combinators and why do we need them?

This is the second part of a five-parts article. You can find the first one here: CSS Selectors – The ultimate guide on simple selectors

Others are:
CSS Attribute Selectors – A Quick Intro
CSS Pseudo class Selectors – A Quick Intro
CSS Pseudo element Selectors – A Quick Intro

In short:-

Overuse of classes and IDs can also create more presentational markup in your HTML, creating more work for you and anyone else working with the code.

But CSS combinators reduce the strain of overly specific selectors and heavier markup by efficiently associating elements on your page.

Let’s dive into the different kinds of combinators we can use.

What are Combinator in CSS?

A combinator is something that explains the relationship between the selectors in CSS. By combinators you can target children, grandchildren, great-grandchildren, or later of a given element in the document tree.

There are four different combinators in CSS and they are as follows:

  • Descendant selector (space)
  • Child selector (>)
  • Adjacent sibling selector (+)
  • General sibling selector (~)

CSS Descendant selector (space)

Descendant selector lets you mix simple selectors with a specified logic and is denoted with an empty space. The pattern of this combinator is simply two tags side by side with a space in between them. It selects elements that are descendants of the first element.

Descendant selector example

<body>
    <article>
      <h1>Header</h1>
      <p>Text inside article</p>
      <div>
        <p>Text inside div</p>
      </div>
    </article>
    <p>Text outside article</p>
 </body>

For example, if we want to select all of the p elements, which are inside the article tag. We first write the article selector, putting a space and then define a tag next to it and finally we can apply rules.

article p {
 background-color: yellow;
}

As you can see from the CSS, we gave a background color of yellow and the p tags inside the article tag will get a yellow background color. The other p tags which are outside of it won’t be affected by this rule.

CSS Selectors – CSS Descendant selector example 1

CSS Child selector (>)

The child selector uses the greater than (>) symbol to denote and targets elements that are immediate children of the parent.

You can use this selector, for instance, to select the first level of list elements inside a nested list that has more than one level. Let’s check out an example to understand how it works:

Child selector example

<body>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li>
        <a href="#">Services</a>
        <ol>
          <li><a href="#">Design</a></li>
          <li><a href="#">Development</a></li>
        </ol>
      </li>
      <li><a href="#">Contact</a></li>
    </ul>
</body>
ul > li {
  list-style: square;
}
ul > li ol {
  list-style: none;
}
CSS Selectors – CSS Child selector example 1

The style rule inside the selector ul > li applied to only those li elements that are direct children of the ul elements, and has no effect on other list elements.

🤔 Descendant selectors vs. Child selectors

The difference between Descendant and Child selectors is that the Child Combinator is more specific. It only select direct children elements of the first tag.

The Descendant Combinator however is more liberal. Not only it select children of the first tag, it will also select grand children, great grand children, and so on.

CSS Adjacent sibling selector (+)

Let’s move on with another combinator which is the adjacent sibling selector. Adjacent means “immediately following” and in CSS it is represented with the plus (+) operator.

Adjacent sibling combinator targets elements that are next to each other in the document tree which have the same parent. In other words the second tag directly follows the first, and they share the same parent element.

This selector has the syntax like: E1 + E2, where E2 is the target of the selector.

Adjacent sibling selector example

The selector h1 + p in the following example will select the p elements only if both the h1 and p elements share the same parent in the document tree and h1 is immediately precedes the p element.

That means only those paragraphs that come immediately after each h1 heading will have the associated style rules.

<body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
    <ul class="task">
      <li>Task 1</li>
      <li>Task 2</li>
      <li>Task 3</li>
    </ul>
    <p>This is one more paragraph.</p>
    <p>This is also a paragraph.</p>
</body>
h1 + p {
  color: blue;
  font-size: 18px;
}
ul.task + p {
  color: #f0f;
  text-indent: 30px;
}
CSS Selectors – Adjacent sibling selector example 1

CSS General sibling selector (~)

The fourth and last combinator is the general sibling selector. Sibling means elements on the same level, so none of them are their parent or children.

The general sibling selector is similar to the adjacent sibling selector, but it is less strict. A general sibling selector is made up of two simple selectors separated by the tilde (~) character.

It can be written like: E1 ~ E2, where E2 is the target of the selector.

General sibling selector example

<body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
    <ul class="task">
      <li>Task 1</li>
      <li>Task 2</li>
      <li>Task 3</li>
    </ul>
    <p>This is one more paragraph.</p>
    <p>This is also a paragraph.</p>
</body>

The selector h1 ~ p in the example below will select all the p elements that preceded by the h1 element, where all the elements share the same parent in the document tree.

h1 ~ p {
  color: blue;
  font-size: 18px;
}
ul.task ~ p {
  color: #f0f;
  text-indent: 30px;
}
CSS Selectors – General sibling selector example 1

So if you need to target elements on the same level of a specified element in a document tree then it is good to use the general sibling selector.

Conclusion

Sometimes people ask that we already have the class and id selector in CSS so do we have to use combinators?

Actually no, you don’t have to use combinators, you can surely apply classes as much as you need, but sometimes in some cases using classes is not that efficient and then using these combinators will help you to write less code and do more in CSS.

That’s why it’s good to know them.

How useful was this post?

Click on a star to rate it!

Average rating 0 / 5. Vote count: 0

No votes so far! Be the first to rate this post.

We are sorry that this post was not useful for you!

Let us improve this post!

Tell us how we can improve this post?

Similar articles you may like

Sunil Pradhan

Hi there 👋 I am a front-end developer passionate about cutting-edge, semantic, pixel-perfect design. Writing helps me to understand things better.

Add comment

Stay Updated

Want to be notified when our article is published? Enter your email address below to be the first to know.

Sunil Pradhan

Hi there 👋 I am a front-end developer passionate about cutting-edge, semantic, pixel-perfect design. Writing helps me to understand things better.