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
.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
- Descendant selector
- Child selector
- Adjacent sibling selector
- 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.
See the Pen CSS no-selector by Amer Sikira (@amersikira) on CodePen.
In the example above, we see that both
p have the same class
block. But since we specified
div has a gray background. This is because we used the Additional self-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
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.
See the Pen Descendant selector by Amer Sikira (@amersikira) on CodePen.
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.
See the Pen Child selector by Amer Sikira (@amersikira) on CodePen.
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.
See the Pen Adjacent sibling selector by Amer Sikira (@amersikira) on CodePen.
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.
See the Pen General sibling selector by Amer Sikira (@amersikira) on CodePen.
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.
See the Pen Pseudo selector and adjacent selector by Amer Sikira (@amersikira) on CodePen.
While we hover on a
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