Combining CSS Selectors
If you wonder why we’ve not talked about combining CSS selectors at the beginning, I’ve to say it was my bad. I’ve just missed these stuff for… no reason. :D
In every aspect of life, our most naturally way to learn anything, is not going on a straight line. Our paths are always spirals; seamless and continuity spirals.
We start by learning some basic stuff and create some things. Then we back to the core knowledge to learn a little more deeply and create a little better things. That’s it.
And now we’re starting a new cycle by learning more about CSS Selectors. :D
What is benefit of Combining Selectors?
Let’s take a look back at our simple navigation bar.
To style the links, we’ve given them a nice class name
nav-link which is very
descriptive. But, what if we have another navigation bar in our webpage? By
directly using the class name in CSS, we’ve made it not able to be re-used.
Fortunately, CSS allows us to combine Selectors to select elements more precisely and make class names able to be re-used. The snippet below is an example about combining CSS Selectors. In the example, there’re 2 CSS blocks:
- The first one will select only
- The second one will select only
How to combine CSS Selectors?
Combining CSS Selectors falls into 3 types and we’re gonna talk about them one by one:
- Union & Intersection
- Next Sibling & Followed Siblings
- Children & Descendants
1. Union & Intersection
Union of multiple Selectors is commonly used to reduce repetition in CSS.
Let’s assume that we want to apply the same font to all headings in our webpages. So, this is how we style them without combining selectors:
The following re-written code snippet can provide the same effect:
By writing Selectors in a row and separate them using commas
, we can write
some shared rules and avoid repetition in our code. And that is
Intersection helps us to select elements more precisely by append a selector
to another one. The example below will select only
<p> elements which are
.excerpt, and vice versa.
2. Next Sibling & Followed Siblings
To select the
next sibling of an element, we can use a plus sign
+ to combine
Selectors. The example below will select only the
<p> element which is the next
If we change the
h2 in our CSS code, all of those 3
will be selected. The web browsers will understand that we want to select every
<p> elements which is the next sibling of an
To select all the
followed siblings of an element, we can use a tilde
combine Selectors. Let’s change our code snippets a little bit.
3. Children & Descendants
children of an element, we can use a greater-than-symbol
combine selectors. The example below will select only the links which are
#topnav, but not all descendants.
To select all
descendants of the
#topnav, we can just remove the
For all the examples in this tutorial, I’ve been using
id selectors for better
explanation. But, the front selectors can be
class selectors or
Our tutorial about combining-selectors has finished. In the next tutorial, we’ll talk about pseudo-classes which can help us to create interactive effects: Something like when a visitor hovers mouse pointer on a link and the link’s color will be changed.