CSS Specificity and Why You need to Learn It

One of the most important principles to learn about CSS (Cascading Stylesheets) is CSS Specificity. What is CSS Specificity? Specificity is the act of specifying a certain element directly by it’s name. In other words, it’s like calling someone by the first name. For example, say we have the name John. There’s probably a few million people out in the world who’s name is John. And so if you tell all Johns to move to the left, then all of them will move to the left. The same goes with CSS elements.

Basic Setup

Here’s our basic setup for the tutorial. We have three div classes: header, navigation, and sidebar each with their own ul’s and li’s

And naturally, we want to style all the lists, but we don’t want the header’s list to have bullets, and we want to make the sidebar’s list a different color.

The CSS Setup

Now after setting up the stylesheet and linking it with my HTML document, I used the following code.

.header ul{
list-style:none;
}
.sidebar li{
color:#ff0000;
}
.sidebar li.important{
color:blue;
}

You may be confused on what it is (will be explained shortly), but when you put that code in your stylesheet and then preview your html document, you should get something that looks like this:

The Explanation

So basically, to specify certain CSS elements, you need to call it by it’s real full name. Let’s take a closer look at the first CSS tidbit.

.header ul{
list-style:none;
}

We want to target the ul that’s found in the header class div. Therefore to do this, we first specify who/what – .header and then we specify what else we want to target inside which is the UL. Specificity works from inside out. So the inner most element should be the last element/name in the CSS declaration. And that’s how we have .header ul.

.sidebar li.important{
color:blue;
}

This example shows how we can target a specific element within another element. The sidebar has a list of items, but one of the items is giving a class name of “important” because we want to make it a different color than the other list items in the sidebar. And so as you can see, we first targeted the outside by declaring .sidebar and then we target the class name of .important to finally give it the attribute of the color blue. Now you may have noticed why the letters “li” is in front of .important. Naturally it’s not needed, but in my experience I found it’s useful and helps you target the element correctly just in case if you had class names that repeat, or something fishy happening with it. It’s a good practice.

Conclusion

And that’s how you target CSS elements specifically while letting other elements of the same type being styled differently throughout the site. This is actually how I designed my Journal version of my blog. By using different class names for my body tags and content tags, I’m able to give it a different background and position things different based on what category you’re in, or what post it is.

CSS Specificity truly makes CSS so much more flexible than most people think. Just keep your ID and Class names clean and you can do so much with just HTML and CSS.

For an added learning resource, check out this tutorial and video about CSS Specificity.