Order & Specificity

[00:00:00]
>> Kevin Powell: Onto one of the biggest pain points of CSS, which is part of the cascade, which is order and specificity. So order and specificity are parts of what I talked about earlier, the cascade, as I just said. Order is the easy one, we're going to start with that. I have paragraph, color black, color white. Matt, what color would my paragraph be? Um, color white. Yes, color white. Why is it white? Because white supersedes further down and overrides black.

[00:00:30]
Exactly. CSS files read top to bottom. If it has the same thing twice, it takes the one that's lower down. Simple as that. So this doesn't have to be with one declaration. It can also be if you have the same thing being applied in two different places. So you have a selector, a whole bunch of other code, another selector. Once again, the paragraph would be white. This might look silly when you see it like this.

[00:00:53]
This happens all the time because in a single declaration, you might have 20 or in a single rule set, you might have 20 declarations and in the middle, you're not noticing that there's something else, you're at the top trying to change the color and there's something all the way at the bottom, or you have a style sheet with 500 lines of code in it, you're selecting something that's actually already selected lower down.

[00:01:14]
So specificity is, or not specificity, but the order starts getting in the way a little bit. This is a bit of a classic riddle that actually does throw some people off that I wanted to bring up. So I will, we have a class of red, a class of blue, so they're both doing the same thing. I have a paragraph, class equals blue, red. It's looking at both of these that are right here. Tanner, what color do you think it would be?

[00:01:40]
I'm going to guess blue. You're going to guess blue. Does anyone here vote for red? Sure, I mean, I would have thought red just because red's the second class. Peter says red. Roberts has red. Like Christian says blue, red red, Walter says red, Jerome says blue. We're getting like pretty much 50%, 50%. Yeah, OK. So that in the room here, I guess it sounded like we're about the same. This is like I've seen this quizzed all over the place and it's always something that throws a lot of people off.

[00:02:21]
Reveal, it is really hard to read, but it is blue. So the order of them here and even we can go take a look, this is done in my dev tools. I can go find that paragraph. You can see I gave it the class of blue red, and if I go find the color in here, which we'll get to, there it is, we have the color blue, color red. And if I drag this out far enough, oh no, this is being minified, we're not going to worry about it, but I did it the exact same way, and you can see it's crossing off the color red because it's actually using this one instead, and it's because the order of them here has no impact on anything.

[00:02:56]
We're just saying class blue red. The browser then goes and finds the CSS, starts at the top, works its way down, it gets to the blue, that's at the end, and it uses that style. So definitely one of those things that can trip people up. Now order's super important, but specificity is where things get even more interesting because it takes order out of the picture a little bit. And it all depends on how specific a selector is.

[00:03:22]
So if we have something with a class of black text, I have a black text first and a paragraph down here, this time the text will be black, even though it's coming first. And the reason for this is a class selector is more specific. This makes a lot of sense in a way. The class, we're not saying all of my things, I'm saying this one thing or anything that I've taken the time to apply a class to should look, should be black.

[00:03:47]
So we're being more specific in the code we're writing, so CSS is treating it to be a more specific thing and it's applying that style instead of taking this one here. Order only comes into play if the level of specificity is the same. So first it goes, which is the most important rule, then if there's a conflict between styles, then order actually comes into it. There is another one which is the IDs, which I talked about before.

[00:04:15]
IDs are super specific because you can only have one per page. So if you had three different things, we have the H2, we have the class, and an ID, the ID will always win if they're banging into each other and conflicting with one another. Again, it's a lot more specific, so it wins. This is the reason why people don't like IDs because they're extremely specific and they can potentially cause some problems, so you'll hear a lot of advice saying don't use ID selectors.

[00:04:47]
You can get away with it if you're using it intelligently, but it just takes a little bit more thought to and being aware that you might run into a conflict that becomes a little bit harder to manage. You can also combine selectors. An H2 article title, or ID of article title is the equivalent of adding them together. We have an element selector and an ID selector, or the same with that combinator here as well, an H2 black text.

[00:05:16]
It's an element plus a class selector, so this would be more important than just a class selector, or this would be more important than just an ID selector because we've added something extra to it. There's lots of specificity calculators out there, so this is one of them, that's right here, from Polly Payne, which is nice. So if you're not sure, you come in. I have an H2 article, or article title, and I see that it has a score of 011.

[00:05:47]
There's a common misconception with these scores. People think it's a point score, you'll hear IDs are worth 100 points, classes are worth 10 points, and element selectors are worth 1 point. It's not quite true, because if I came in with a whole bunch of classes. 5, whoops, that's OK, we'll do 567, no, the 5 did break it, so we will. Is that not letting me work? What did I do wrong? 40, double dot.

[00:06:24]
Thank you. That would fix it. 7, 89, 10, you can see we have 11 class selectors. So one single, we're not getting to like 100 points, we just have 10 class selectors. So if I came in with a single ID test, whatever, it doesn't matter, it has a higher score. IDs will always overwrite basically anything. Again, why we usually hear don't use them, and they have some examples here and there you can see some more advanced things and how it impacts stuff.

[00:06:50]
To try and if ever you get into problems and it gives you IDs, classes, elements, and breaks it all down for you. There's other ones you can get that actually you can compare selectors together as well. One more little quiz, I have a main with an ID, a class of title, and this is in H2. So I have 3 different selectors here, H2, title, and main, 3 different selectors, saying the color should be red.

[00:07:18]
A main with a title, it's a direct sibling which matches. My title is a direct sibling of the main, which is saying the color should be blue, and an H2 with a class of title saying it will be green and with a text transform of uppercase. Sarah, what do you think it would look like? Um, the one I'm not sure about is like, is the ID going to work because it's not on the actual title. Um, so I'm not sure how that works.

[00:08:00]
I mean, I would say, I don't know. I'll go with blue. Blue, OK, so you're saying blue. What about the, is it uppercase or not going to be uppercase because we're using this? It would be uppercase. It would be uppercase. OK. Does anyone vote for a different color, just show of hands from blue, or is everyone saying blue? I don't know, everyone's saying blue. OK, we got consistent. What about uppercase?

[00:08:28]
Is everyone saying it's uppercase or does anyone want to say it might not be uppercase? I think we're not saying much. No, it's quiet, but no one wants to commit. We have blue uppercase text. You're right. So first we do have, for anybody who was thrown off by that, saying like, oh, this is an ID sorry, element ID and class selector, that should be the highest. These are three different selectors.

[00:08:52]
The comma means this is a class select or element selector, this is a class selector, this is an ID, so they're treated as separate selectors because of the commas that are in between them. This one, it's a single selector, and that selector, even though the main isn't selecting the title itself, it's still part of that selector. So we're saying it's a class as well as an ID combined together, super high specificity.

[00:09:14]
And this last one down here, lowest specificity of them all, but it is making it uppercase because the only conflicts that are happening are on the color. Nothing else is talking about text transform. So the browser can apply that, that's fine, and then it goes through, it finds the conflict on the color and finds the highest specificity selector to be able to apply the color. So it's using parts of different rules.

[00:09:40]
Yes. It's using parts of different rules, and this is one of the biggest reasons to keep our selectors very simple. When you start writing complicated CSS and writing weird things like this, which a lot of beginners do. You start getting these weird conflicts and weird things that start getting in the way, you'll see some people saying only use class selectors for everything. It's the safest way to go.

[00:10:02]
It definitely is because then it's only based on order. We've removed specificity from the equation completely. Fantastic, that's cool, that works. Sort of like riding your bike with training wheels though, right? You start, you've eliminated something where you put your training wheels on, you don't have to worry about balance, you're learning the mechanics of riding your bike. At one point you probably want to take those training wheels off.

[00:10:23]
So at one point you can start going, OK, maybe I can use some descendant selectors. It's going to boost the specificity, but if I understand that and I understand the other parts of it in the right places and being smart about it, you can get away with a few things that just make it actually easier to write your CSS and to maintain your files. So we'll be sort of talking about that a little bit as we go, but keeping selectors simple, avoiding weird things is usually a good idea.

[00:10:56]
Yes. Question, if we commented out the middle rule set for a second, you said the last one was the least specific. So the ID main, would that override the green? Yeah, exactly. Yeah. So yeah, yeah. Oh, no, you know what, you're right. I made a mistake there. It would be, it would actually be green. Let's do it. I think I applied these, but you're right. If we took off this one. It would go green. OK.

[00:11:27]
Yeah, thank you for catching that. So, the reason for that, cause I got that wrong there, is we're not looking, this is my main is on the outside, the title's on the inside. So the class selector here is being directly on the H2. So this main isn't part of what's setting the color here. The only selector here, cause these again are three separate selectors. The title is saying red, whereas down here we have the exact same thing with a bit higher specificity, so the color actually does go to green.