This course has been updated! We now recommend you take the Complete Intro to Web Development, v3 course.
Transcript from the "CSS Selectors and The Cascade" Lesson
[00:00:00]
>> Brian Holt: CSS Selectors and the Cascade. So now we're gonna talk about the C part we're gonna answer our friend's question which one wins? Which is always a good question.
>> Brian Holt: So,
>> Brian Holt: The Cascade, this is always just the part that I get least excited to talk about, okay.
[00:00:21] The cascade is gonna cause you so many problems. It's going to take years off your life. [LAUGH] It's really cool, you can see why they created it but I've worked at enough companies to see it used and abused in so many terrible, terrible ways. That's why I get a little stressed out whenever I say the word cascade.
[00:00:43] So,
>> Brian Holt: Let's say I have two paragraphs, must have broken this somewhere around. But pretend this one's red and pretend this one's green. And I wanna make them style different ways. As you might imagine I might use classes to differentiate the two. That's what we talked about previously.
[00:01:07] So I would say this one would be, I don't know error text and this would be success text or something to that effect, right, some semantic good name thereof. So we did that with the section on classes and making sure that we've labeled them well and things like that.
[00:01:27] And we do a thing here like,
>> Brian Holt: This one would be called branding and this one would be called post title. And this would have one set of styling. And this would be another sort of styling.
>> Brian Holt: This is what I'm saying here, we're gonna be using the style tag here.
[00:01:41] This is not typically how you would do it. You would typically have a separate CSS file and a separate HTML file. But for instruction purposes, we're just doing it all in one file, cool? The other thing I will tell you is that this style will bleed outside of this, just so you know.
[00:01:59] So, if I say all h1s on the page should be,
>> Brian Holt: Orange, this won't affect the entire page. So just be aware that if you start seeing things that look really weird it's probably because you put something in a code block somewhere. Okay, so if I have an h1 here called branding and an h1 here called blog-post-title and I want this one to be red and this one to be green.
[00:02:29] This one I select branding and this one I select blog post title. The way that you differentiate that I am asking for a class and not for a tag is you put this period here. This period before the selector means class.
>> Brian Holt: So, yeah, just make sure you remember that the period means class.
[00:02:54] So if I wanna select the class called branding, I do .branding. Or if I wanna do blog post title, it's .blog-post-title. If I delete this dot, it's gonna mess this up. It's going to be looking literally for a tag called branding, which is not a real tag, but that's what it's going to be looking for.
[00:03:14] Does it make sense? So .branding.
>> Brian Holt: So that's what you look for, you look for the dot.
>> Brian Holt: Generally speaking should you style on tags or classes? Always style on classes, don't style on tags. Hardly ever, I would not suggest it. The only time that I would suggest styling on tags is if you literally mean everything in this document should look like this.
[00:03:50] And a good example of that was, if I'm doing a website like this one, this Intro to Web Dev, and if I go look at this, you'll notice that all of my all of my anchor tags, all of my links look the same. That makes sense, because now I want all anchor tags to look like that.
[00:04:06] That would make sense for me to style by a tag. But I only wanna do that if I literally mean every single one. That make sense? I would say that I'm giving mostly my opinion on these things. There might be people that disagree with me but they would be wrong first of all.
[00:04:23] [LAUGH] And second I don't think it's actually that controversial. I think most people would tell you a relatively similar thing.
>> Brian Holt: So style by class. That's just kind of a thing that you wanna get used to. Mostly you should be styling by classes.
>> Brian Holt: You will have a lot of heartache that you'll accidentally be styling things using tags that you can avoid if you always style by classes.
[00:04:52] It's just a better idea.
>> Brian Holt: Err on the side of using classes too much. If you're not sure one way or the other just go with classes. You might need like a tiny bit extra writing but doing a tiny bit of extra writing will save you a lot of heartache in the long run.
[00:05:14]
>> Brian Holt: Cool, any questions about that so far?
>> Brian Holt: Please.
>> Speaker 2: I see that you're styling by class there. Can you show us how you would style by tag?
>> Brian Holt: Yeah, you would just put h1 instead.
>> Speaker 2: With the dot?
>> Speaker 2: Okay.
>> Brian Holt: It's not gonna work for other reasons.
[00:05:42]
>> Speaker 2: Okay.
>> Brian Holt: Which we'll get to literally in the next section.
>> Speaker 2: Okay, I was just asking-
>> Brian Holt: You wondered why it wouldn't work.
>> Speaker 2: Yeah, it wasn't working with mine.
>> Brian Holt: Yeah, there are reasons which we'll talk about. But good question.
>> Brian Holt: Let's refresh this page, I think I broke something.
[00:06:01] Okay, that's an astute observation. So, you can see here, I was sitting on the beach in Sydney, actually, when I was writing this section. I was like, I wish I could stop here. I can't. [LAUGH] So this is the part where CSS, this to me, what we've done so far is pretty fun.
[00:06:23] You just make a rule and see change and it's kinda fun. There's a thing called the cascade that has bitten me in the ass so many times that it just it's not fun. So I'm going to invite you to avoid using the cascade as much as possible, keep you CSS as simple as possible.
[00:06:46] And avoid making it more and more complex. And I'll give you some like war stories and horror stories towards the end when you understand a little bit more what I'm talking about. So the cascade. Someone asked before what happens basically if I have two conflicting tags, right? If I have two things that are both saying the same thing one of them has to win, right?
[00:07:07] If I say this one says green and this one says orange and they both match which one wins? Cuz it's either gonna be green or it's gonna be orange. It's not gonna be both, and it's not gonna mix them, that would be way worse. [LAUGH] So you can be grateful it doesn't do that.
[00:07:23] I should write a library that does that, that sounds terrible. [LAUGH] Okay, terrible ideas. So if I have .title here, .title here, I think I probably like ruined the surprise so far because I scrolled down far enough. Which one wins and why? Cuz these both are the same thing, right?
[00:07:44] There's nothing preventing me from putting .title on there twice. Obviously green came out on top but why?
>> Speaker 2: Because it came last.
>> Brian Holt: It came last. That's exactly the reason. If these two are exactly the same, so when two things are considered equal in terms of CSS the one that comes last wins.
[00:08:04] Even if I had title and other title, I'm not very creative right now.
>> Brian Holt: It's still selecting by one class. And it doesn't matter that they're different in any respect. They're both one class, so therefore the one that comes last wins. Good so far? So when everything's considered equal, the one that comes further down, wins.
[00:08:37]
>> Brian Holt: Cool, so when you have two rules with the same class, it's legal. I would not suggest it. I can't see of any reason why you would want to separate those things out, but you can. It's legal, just don't. Which one gets applied? It's the one that's on the bottom.
[00:08:57]
>> Brian Holt: It'd be the same if we had two different h1 selectors as well. So if this said h1 and this one said h1, it would also be the one that came lower that would win,
>> Brian Holt: Okay,
>> Brian Holt: Yeah, so what I wanted to point out here is, so yes these are two different classes here.
[00:09:16] So title-2 and name brand-2, but notice one thing, so I have main brand here 2 which is losing on red, right? Because this one comes down so this ends up being green, but this one does not specify border, right? So it does get a black border because it's resolved on a property by property basis.
[00:09:39] So this is 1px solid black. Notice here that it does end up having a black border. I can even actually, if I say border-style: dashed, so you can see a little better.
>> Brian Holt: So I say up here 1px solid black and I change it here. So just the dashed part is being changed, all right?
[00:10:05] So it's even more granularly resolved. Does that make sense? So I'm just overriding the border style. This is called the cascade. Just so you know. It's going through this cascading effect of trying to resolve the properties to kinda get down to one resolution of style.
>> Brian Holt: So we're dancing around this thing that is called and again I hate this word, specificity.
[00:10:37] [LAUGH] Like go around to a hardened front end developer and ask them what they think about specificity. And they'll just get this long glance, this 10,000 foot glance, all the stories I could tell you, right? It's just like they've been to war or something. And you just end up with these rats' nests, I'm showing you here very, very simple cases.
[00:11:05] But imagine this 14 layers deep, and you're trying to figure out where the hell did this style come from. That's why I'm telling you to keep everything really, really simple. Because the simpler you keep it the less problems that you're gonna have with this. And I have some bad examples underneath here so you can see why.
[00:11:29]
>> Brian Holt: So let's keep going here. We did that. Now we're going to get into multiple classes. So I have title three here. So this has title-3 and main-brand-3, but now up here I have main-brand-3.title-3. Which color wins? Red, because it is more specific. It has two classes, this only has one class.
[00:12:00] This one is therefore more specific, and therefore wins. This is the specificity part of this. Now notice there is no space here between 3 and .title, right? That it's right there shoved together. If I put a space there, I break it. So need they need to be shoved together and they're separated by a period.
[00:12:23]
>> Brian Holt: Cuz it's the main brand and it's also the title classes, both of those classes which it has.
>> Brian Holt: So there's no space between them, therefore it wins because it has two classes. Now keep in mind that this h1, down here, has to match both of those classes.
[00:12:45] It must have title-3, and it must have main-brand-3. Just to show you. If this just has title-3,
>> Brian Holt: Notice it's green, because it doesn't match the entire selector, so it must match everything in the selector. That make sense? Okay,
>> Brian Holt: Next steps here, h1 comes lower on the page.
[00:13:15] And title-4, notice which one wins here. Orange, why? Because classes are more specific than tags.
>> Brian Holt: Why, I don't know. Why do we do anything? [LAUGH] It just is. So let me give you a little device to see if this helps you kind of determine. You can kind of think of it as being a number where the first number is how specific the tag part is, the second number is how specific the class part is.
[00:13:59] So I think they have it down here, yeah.
>> Brian Holt: So this has one class, so it's ten specific and it has one tag so it's one specific, right? Whereas if they had like three classes it'd be 30, right? So you can think of this tens place as being how many classes there are?
[00:14:21] And the ones place of being how many tags there are. So if I had three classes, that's 30, compared to five tags, which is impossible, but ignore that for a second. The 30 would be bigger than the 5 so therefore the classes would win. Doesn't totally work out.
[00:14:39] If I had 11 tags, one class would be still more specific. So it's just kind of like a mental device, it's kind of imperfect. But just think of classes being more specific in text. That's ultimately what I'm trying to get at here.
>> Brian Holt: So let's move on and just like get this even more complicated.
[00:15:02]
>> Brian Holt: So I have title-5, name-brand-5, it's in h1. h1.main-brand-5, main-brand-5-title-5, and main-brand, so this one is one tag and one class, two tags and two classes in one class.
>> Brian Holt: So thinking about it, this is one tag, this is 11, right? This is 20, and this is one.
[00:15:35] No, sorry, this is 10. So therefore the one that was 20 wins, right? So the one with two classes so therefore it becomes orange. Does that make sense, okay.
>> Brian Holt: This is how you do tags and classes together, right? This is an h1, right? Has no period in front of it and then a .main-brand-5, right?
[00:16:03] So that's how you get the tag and selector together. I will invite you to not do this. This is usually not a good idea to do the tags and classes together. The reason being is it should usually just be enough for you have just main-brand-5, that should be it.
[00:16:22] And you shouldn't really be mixing tags and classes. If something is made for h1s, it should always be in h1. So you don't normally wanna select h1s differently than h2s. It wouldn't make a ton of sense for me to have an h2-main-brand-5. That's really strange, and it's gonna be hard to follow when you're trying to write this code later.
[00:16:47] So I would stay away from that. Again, just in general, avoid styling by tag. It's just not a good idea.