This course has been updated! We now recommend you take the Complete Intro to Web Development, v2 course.

Check out a free preview of the full Introduction to Web Development course:
The "CSS Order & Specificity" Lesson is part of the full, Introduction to Web Development course featured in this preview video. Here's what you'd learn in this lesson:

When you have multiple CSS rules modifying the same properties, the more specific rule will apply. Brian goes into a demonstration showing how specificity can be used to override generic styling.

Get Unlimited Access Now

Transcript from the "CSS Order & Specificity" Lesson

[00:00:00]
>> [MUSIC]

[00:00:04]
>> Speaker 1: Would that apply to every single div on the html?
>> Brian Holt: Yep, so, if I put another div in here, it would look pretty weird, but let's do that.
>> Brian Holt: Another div.
>> Speaker 1: If you change it to div class, would that be different or would it still apply?

[00:00:31]
>> Brian Holt: It would still apply because it's still a div, right?
>> Speaker 1: Well, what if you wanted to change it? What if you didn't want those two boxes to match because you'd have this div and css, and then put it in the class of everything.
>> Brian Holt: That's a good question, so lets do one for this-class.

[00:00:52] And say background-color green, okay? Now we're starting to get into specificity a little bit. Oops this-class.
>> Brian Holt: So kind of interesting what was going on here right? So let's first of all, you've got the HTML right. Like this one is a div with no class. This is a div with a class that says this-class okay?

[00:01:22] All right so collapse that. Let's talk about what's happening here. This div does apply to this right? Like this is still a div so it's getting all that style applied to it. But then we have one down here that says this-class and it doesn't contradict all of those properties it only contradicts one of the properties which is the background color.

[00:01:47] So now you have a conflict here in the background class so it's needs to ask itself which one wins right. Like which one gets applied when these two are conflicting. This is this idea of specificity that I keep referring to. This-class is more specific, thus it gets applied.

[00:02:07] So, its background color is green, and so therefore, it would be orange otherwise, like if I took this property out it would go back to being orange. But because it is more specific it gets applied. So let's talk a little bit about specificity now. Let's go back up here to our html, okay.

[00:02:34] I'm gonna have another div underneath it, oops I don't want that one. Actually you know what? Why not? It's kind of fun. We'll put the other one right here. I am also here, okay. So we now have four divs and I'm going to give this one ID. Let's call this one another class.

[00:02:58] And then down here, we're gonna have one that's gonna have another class but it's also gonna have id="special" or something like that, okay. Let's go ahead and change these back out. So this is gonna have no class. This is gonna have one class. Also no class. Just so it's kind of visually apparent to which is which.

[00:03:37] This is gonna have two classes and this is going to have two classes plus id, okay? So, in no class, one class, also no class, two classes and two classes and an id.
>> Brian Holt: Oops, and let's expand this one out, okay. So, these ones that have the class on it are all getting the green background.

[00:04:11] Right, the ones with no class are getting the orange background. So if I do well, first of all, if I do another class, right? Because these ones with two classes all have another class on them right. So, if I say background-color: pink.
>> Brian Holt: Nothing changes, right? Why? Because this class and another class are the same specificity.

[00:04:44] Because they have one class on them that match. So it's gonna pick the one that's lower in the file, the last one that gets declared. But let's do this-class.another-class, make sure that there is no space there. That's key, that's a very key difference. And I say background-color: blue.

[00:05:15] Two classes, both of them down here now have a blue background. I can put this above. I could, oops, sorry. I could put this above it, right. It wouldn't matter what order in the file it came because now it has two classes that it's referring to and therefore is more specific, okay?

[00:05:35] Now, just for fun, at the top right up here, I am going to say #special, right here and I am going to say background color: yellow or something like that, it doesn't matter, there no huge difference there. Purple.
>> Brian Holt: It's background color is now purple, why? It's because IDs, no matter how many classes and I know it's actually not completely true.

[00:06:09] But for really all intents and purposes, no matter how many classes you have in there, an ID is always more specific because you're addressing just one. So ID always trumps classes even if there's like 30 classes on it, right? Way more than it's actually possible. I think actually if you have 256 classes, it will finally beat an ID, but that's just totally and completely impractical and will never happen.

[00:06:38] Or if that's happening to you, you really need to come back and watch this class again. Because that's not good. Okay, so we've kind of demonstrated to you these principles, yeah?
>> Speaker 3: So there's kind of a hierarchy here. If div gives like a red background. They all have red borders.

[00:06:56] Sorry, not background. And f only replaces the things that, it's kind of pulling from both of them.
>> Brian Holt: Yes, it's cascading. It is a cascading style sheet. This is exactly why it's called CSS. A cascading style sheet. It's cuz the effects cascade down, kind of like a waterfall, right.

[00:07:14] That's the idea here.