Written by Andrei MoraruJul 02, 2020

We integrated into our Technical Blog section a new project that Andrei, a great developer in our community, wanted to share with all of us. Now, the project consists of a series of courses created by Andrei with a lot of passion and dedication, giving from his knowledge gathered during years of work and sleepless nights the chance to learn, grow and become our best version in the future. You can find the other chapters of the course in the Tech section of our blog - here.

Now let's discover the next part of the course together! Enjoy!

  1. Topics of discussion
  2. CSS selector types
  3. Combining CSS selectors
  4. Selector specificity

1. Topics of discussion

In this tutorial, we are going to take a look at CSS selectors and how one can compute a selector specificity. So, let's have some fun.

2. CSS selector types

CSS selectors are basically the names you use in your CSS files in order to add certain styles to them. There are three different types of selectors:

Class selectors are very useful when you want to reuse the style defined for one element multiple times or in multiple pages. HTML element selectors can be useful if you are certain that all elements of a certain type need to be styled in some way, though more often than not HTML element selectors are used alongside class selectors.

Finally, id selectors are useful for creating dedicated styles for a certain element and its children, without affecting other areas that might reuse the same classes. Basically, you can use them to override some styles for a certain area in your page without affecting other areas.

3. Combining CSS selectors

CSS selectors can be combined in a number of different ways. We'll see how this is written in regular CSS since it's important to understand the subtle differences between how the instructions are written. We'll also discuss how you can write these instructions using Less CSS to your advantage.

So, this is how these rules look like in plain old CSS. What about Less? How does it help you write such selectors in a more manageable fashion? Well, let's find out.

The first selector type from the list above is obviously written in the same way in both vanilla CSS and Less CSS. A group similar to the second one from the list is going to be written like this in Less CSS:

.class1 {
.class2 {
color: blue;
}
}

When compiling this file, the resulting CSS will be .class1 .class2 { color: blue; }.

The third one can be written like this:

.class1 {
& > .class2 {
color: blue;
}
}

And finally, the last selector grouping can be written in Less like this:

.class1 {
&.class2 {
color: blue;
}
}

Make sure to play around with these selectors to see how they work.

4. Selector specificity

CSS specificity can become very tricky, especially when you are using a CSS framework that was not written by you. So, what is this specificity? Well, it refers to how specific a CSS instruction is. It consists of 4 different numbers, determined by the presence or absence of certain selectors or HTML attributes. This specificity is usually written by using those 4 numbers and separating them through a comma, e.g. 1,0,0,0.

Going from the most important specificity value to the least important one, here is how you calculate those numbers:

Let's compute the specificity for some elements now:

So, why is specificity so important you ask? Well, because there may be times when you apply a CSS class to an element and it will not change the styles of said element. Here is an example. Say you have the following HTML:

 

 

 

 

And say you have the following CSS:

.list-item {
a {
color: red;
}
}

.main-link {
color: black;
}

Now one would assume that the first element in the list would have black color for the text. Well, sorry to disappoint you, but the color is going to be red. And it's all because of the fact that a higher specificity CSS is setting that color to red. Of course, there is a way around this and we'll get to that when we discuss how we can override CSS rules.

And with that, we conclude this tutorial. In the next one, we will talk about overriding CSS rules. See you then.

 

Interested in finding out more about the author? Andrei's world is just a click away!

If you are interested in working with a team of expert remote developers, contact us TODAY!