1. CSS combinators
So far, we looked at different types of CSS selectors and used them in isolation.
However, they are much more powerful if they are used together. Say hello to CSS combinators.
2. There are four different combinators
All in all, there are four different types of commonly used combinators.
They always have the same structure: A CSS selector, followed by a combinator character or operator, followed by another CSS selector. The first CSS selector might be anything, be it merely a type, a type combined with an ID, or a class selector. Then you can choose from four different types of combinators. We'll look into those in a minute. After that, another CSS selector follows. Again, it can be anything, as long as it is valid.
The first operator is a space, which is the descendant combinator.
The second operator is a "greater than" sign, which forms the child combinator.
The third operator is a plus sign, which designates the so-called adjacent sibling combinator.
The last operator is a tilde, which defines another type of sibling combinator, the general sibling combinator.
3. The descendant and child combinators
You actually already know the descendant combinator from the first chapter. It selects all the descendants of a certain HTML element, whether they are direct descendants or elements further down the tree. To specify it, just write a CSS selector for the parent element followed by a space followed by all the descendants you'd like to match.
Here, all a elements that are descendants of the div with class "first" are selected.
A special case of the descendant combinator is the child combinator. It only selects direct descendants of a parent element and is designated with a "greater than" sign. In this case, this only selects the a element that's a child of the div element and not the a element that is enclosed by a p element.
4. The sibling combinators
Let's look at the same HTML code again. Assume you want to select the second div element in here. Merely using a div type selector obviously won't do the job as it will select all the div elements here. With the adjacent sibling combinator, you can select the div that is a direct sibling of the first div, which you can easily reference because it has a class. Note that the adjacent sibling combinator is written with a plus sign.
However, if you'd want to select all siblings of the first div, you could use the general sibling combinator, designated with a tilde sign. As the first div only has one sibling div, the result would be the same here.
Using a wildcard as the second selector, though, would also select the last p element. It is also a sibling of the first div, albeit not an adjacent one.
5. When combinators come in handy
Well, why even use combinators if you already have a bunch of helpful CSS selectors, you might ask yourself? They come in especially handy if you have a page where not every HTML element is designated with an explicit class or ID. In the best case, you can just select everything with a class selector, like in this example.
However, when confronted with a page without any IDs or classes, the same selection becomes less straightforward.
In this case, you could resort to the adjacent sibling combinator to end up with the same result.
6. Let's practice!
Let's try out some of these combinators.