2.2 CSS Specificity Hierarchy
In this lesson, you’ll learn about the hierarchy of CSS specificity, or which selectors rank higher when applied to the same element. So let’s jump to CodePen and write some CSS.
1.Introduction1 lesson, 01:23
2.Understanding CSS Specificity4 lessons, 25:55
2.2 CSS Specificity Hierarchy
Welcome back to the course. In this lesson you'll learn about the hierarchy of CSS specificity, or which selectors rank higher when being applied, of course, to the same element. So let's jump in to code pen and write some CSS. So here, I have a simple paragraph with a class and an ID. And we're gonna start with the lowest ranking selectors and work our way up to the highest ranking selectors. So the lowest are the type selectors meaning h1, p div, a, and so on. And Pseudo elements meaning before or after first letter, and so on and so forth. So here, we can say, paragraph, color green. All right, so we're selecting the element by using a type selector and we're setting the color green. So far so good. The next in line are class, an attribute selectors and Pseudo classes. So class selector .P, right? This is. My class name here, color, let's set this to blue. Now, just for the sake of this demo, I'm gonna move this up. So you can see that it has exactly the same effect. The order in which these are written here is not important. So that's a class selector, an attribute selector would be something like paragraph class equals P, same deal, right? This does exactly the same thing. As Pseudo class is hover, active focus, and so on so forth. So this is on the second position when we rank these selectors from lowest to highest. On the third position is the ID selector, okay? So if I go in here and I say, my paragraph and I set for example, the color to red, this will overwrite any other selectors because it has a higher specificity, it ranks higher. And finally on the fourth position, we have inline styles. The thing with inline styles is that they always overwrite any styles in any external style sheets. So they can be considered to have the highest specificity, and to give you an example, I'm just gonna go in here and I'm gonna say style color purple, or yellow, so you can see it better, right? So that's my yellow paragraph. And as you can see this inline style overrides anything I have set in my CSS and that's the CSS specificity hierarchy. Now to remember it easier, you can think of it like this. Think of the word specificity. It comes from specific and specific means clearly defined or detailed. Now when you're using a type selector like div, that's not very specific. Which div are you referring to? There are tons of div elements on the page. Now, to be more specific, you would use a class. For example, container. Now your selection is a bit more specific. You're referring to all the divs with the class of container. But what if you want to be even more specific? Well use an ID because the ID is unique. There can only be an ID with that name on the page. So, let's say you now target the element with an ID of main container. Now, that's very specific because you narrowed your selection to one element. And then you can think of inline styles as the ones that overwrite everything else, any external style sheet because they are attached directly to the HTML element. So, as you can see with each step we're being more and more specific, we're defining our target more clearly. Hopefully this helps you understand this hierarchy a little bit better. Now, how do we rank CSS specificity? Or how do we use this hierarchy to calculate the exact specificity values applied to selectors? Well, we can use a weight system to do that, and I'm gonna show you how to do it in the next lesson. So I'll see you there.