Compound & descendant selectors, and combinators

There are different ways that we can combine several selectors together to select something relatively specific.

Compound selectors

We can also combine two selectors by chaining them together without a space.

For example, maybe we have a class for accent text, and one for bold text. If we combine them together, it probably means our text is super important, so we also add an underline to it:

.accent-text {
  color: red;
}

.bold-text {
  font-weight: bold;
}

.accent-text.bold-text {
  text-decoration: underline;
}

You can also mix and match the different types of selectors.

h2.article-title {
  ...
}

main#main-content {
  ...
}

#main-article.with-sidebar.inverted-color-scheme {
  ...
}

I don’t use compound selectors very often, but they can come in handy in some specific situations.

Descendant selectors

We can add spaces between the selectors to select elements that are descendants of other elements.

<h1>
  We can use <span>descendant selectors</span> to select elements that are
  inside of other elements
</h1>

If I wanted to style that <span>, to change the color of it, I wouldn’t want to do this:

/* don't do this */
h1 {
  color: #221;
}

span {
  color: #973712;
}

That would change the color of the span, but it would also change the color of every span on my page!

Instead, we could do this:

/* this is much safer */
h1 {
  color: #221;
}

h1 span {
  color: #973712;
}

This is a called a descendant selector, where I’m only selecting a span if it is a descendant of an <h1> element.

We do need to be careful with them though, because they’ll select every instance of that selector, regardless of how deeply it’s nested.

See the Pen descendant selectors by Kevin (@kevinpowell) on CodePen.

We could use a descendant selector!

There’s a spot in our design where using a descendant selector could come in handy. We’ll have to modify the HTML a little bit to add a new element that we can then select.

Nesting

Modern browsers support nesting, which allows us to skip repeating the parent selector.

h1 {
  color: #221;

  span {
    color: #973712;
  }
}

We can also create compound selectors by using the &, which is a placeholder for the parent selector.

h2 {
  text-transform: uppercase;

  &.article-title {
    color: #973712;
  }
}

& isn’t the same as in a pre-processor like Sass

The & in CSS is a live selector, so we cannot do something like &--accent, which is commom practice when using pre-processors. In CSS, that would the same as writing --accent& which doesn’t make any sense.

Combinators

Building off the concept of descendant selectors, we can add symbols in between selectors to specify the type of relationship those two elements have.

• > Child combinator
• + Next sibling (or adjacent sibling) combinator
• ~ Subsequent-sibling combinator

.title > span {
  /* selects a span only if it's a direct child of a .title */
}

.title + p {
  /* selects a paragraph if it comes immediately after a .title */
}

.title ~ p {
  /* selects every paragraph that is a sibling of the title, which comes after it*/
}

Other than >, the use cases are a little more niche. I wouldn’t worry about how you might use them right now, I just wanted you to be aware that they exist, so that if you see strange symbols in between selectors, you have a rough idea of what might be going on.

Nesting with Combinators

We can also use combinators when nesting.

h1 {
  color: #221;

  > span {
    color: #973712;
  }
}

Should you use nesting?

This is totally up to you. Some people prefer it, and others don’t. Browser support is good, but might not be good enough for production, so do take that into consideration as well.

Whether you use nesting or not, don’t go overboard with descendants. One level deep is probably as deep as you want to go most of the time.

Additional Resources

If you’d like to see some use cases for some of the other combinators, as well as a look at attribute selectors, I took a look at them in a video on my YouTube channel.