CSS Combinators

This post was originally published on webinuse.com
CSS is both awesome and terrifying. CSS can’t ever be learned, because our use of CSS depends on our imagination, ingenuity, and knowledge of CSS. Usually, we use #id and .class to select an element, sometimes we use tag for a broader selection. Today, we are going to talk about CSS Combinators for selecting elements even more specifically.

CSS selector can use more than one selector to select a (group of) element(s). But, in between those selectors, we can use CSS combinators to specify selection even better.

There are four CSS combinators

1. Descendant selector  
2. Child selector >
3. Adjacent sibling selector +
4. General sibling selector ~

Also, there is a fifth group which we can call Additional self-selector. This fifth group is when we use multiple selectors for one element. Usually, we do this when we have several elements with the same selectors, but we want one to distinguish.

In the example above, we see that both div and p have the same class block. But since we specified div.block, only div has a gray background. This is because we used the Additional self-selector.

Descendant selector

The first and most popular CSS Combinator is the descendant selector. We all use the descendant selector, even though we are not aware of it. The descendant selector is presented with an empty space between two selectors.

We use the descendant selector when we want to select a child of an element. The more spaces we have the deeper our selection into the HTML tree is.

Child selector

Child selector is represented by >, and it is used to select direct children of an element. It selects only direct children and not descendants, as we can see in the example below.

Adjacent sibling selector

We use the adjacent sibling selector when we want to select an element that is directly after another element that we’ve specified. Also, both elements must have the same parents in order for the adjacent sibling selector to work.

General sibling selector

The general sibling selector is similar to the adjacent sibling selector with one difference. Instead of selecting only one sibling, it selects every next sibling. This means that every sibling, that corresponds to the criteria, as long as it has the same parent, will be included.

Conclusion on CSS Combinators

CSS combinators are really helpful tools. They enable us to select elements more precisely. As a result, we can be more specific and we can do much more with CSS. In combination with :pseudo-selectors they can do wonders. In the example below, we will use :hover state along with adjacent sibling selector + to change the color of a paragraph.

While we hover on a div, p will change color.

If you have any questions or anything you can find me on my Twitter, or you can read some of my other articles like CSS Units Guide, everything you need to know