Up next in 10
CSS Tutorial For Beginners 12 - Selector Specificity
41 views
Feb 7, 2024
In this CSS tutorial tailored for beginners, viewers delve into the concept of selector specificity, an essential aspect of understanding how CSS rules are applied to HTML elements. The video likely covers how selector specificity determines which styles take precedence when there are conflicting rules targeting the same element. Viewers can expect to learn about the hierarchy of selector specificity, including the importance of element selectors, class selectors, ID selectors, and inline styles in determining the final styling outcome. The tutorial may also provide practical examples to illustrate how to calculate and manage selector specificity effectively in CSS. This tutorial serves as a crucial resource for beginners looking to gain control over their CSS styles and resolve conflicts efficiently.
View Video Transcript
0:00
Yo, Troopers, what the hell is going on
0:09
This is CSF for beginners lesson 12, and in this lesson we're going to talk all about specificity
0:17
So before we start, I want to get one thing straight. I hate the word specificity
0:23
You've no idea how long I've tried to pronounce that word correctly for, but along the line
0:27
somewhere I am going to mess up. So when I do, please go lightly on me. Okay
0:32
So you'll remember from previous lessons we talked about conflict and the cascade
0:36
And we said that if we have two identical selectors in our CSS file, what happens is the cascade runs from top to bottom, comes down here, finds the first selector
0:46
P, colors them all black. Goes further down into the CSS, finds another selector, which is just P, which is identical, and it colors them all red
0:54
So this rule overrides this rule. and all the P tags will be red
1:00
Now, what happens when we throw an ID into the mix? Well, we have this ID here, main content
1:08
and then we're saying we want all the Ps within that main content to be coloured black
1:11
That's our selector, okay? And below it in the CSS, we might say
1:15
we want all the P tags to be coloured red. Now, from what we've learnt so far
1:19
we would expect, would we not, the CSS to come in, start at the top
1:23
colour them all black, come further down, and find this rule, then colour them all
1:27
red, so this overrides this. Well, sorry to break it to you, but that is not the case here
1:34
And the reason is that this rule is more specific. It's finding this ID here and the P within it
1:43
And because this is more specific than this one, this rule is winning
1:47
It's colouring them all black. Now, this P will still have an effect on any other P outside of the main content
1:52
It will still colour all other P's red, but not override this rule
1:57
all the P's in the main content will remain black. So how does CSS decide which rule is more specific than others
2:05
Well, to do that, it goes off this little point system. Essentially, if you have an ID in your selector
2:12
then you give that selector 100 points in value. If you have a class in your selector, you give that ID
2:19
excuse me, that selector an extra 10 points in value. If you have an element in your selector, you give that selector
2:26
you give that selector one point in value. Okay? So the selector if you going after the same thing the selector with the most points which is weightier wins So just skipping back to this example again you can see that this ID gives the selector 100 points
2:42
Then in addition, this P gives it one point, so that's 101 points in total
2:46
This selector here is just the P, so it's just that one peony little point
2:51
Now, this is one point, this is 101 points. So in this case, because they're going after the same tag, this one wins the conflict
2:59
Okay? It's like one of those little card games where you've got like Strength 8, Strength 9, Strength 9, 1 wins
3:04
Exactly the same with conflicts in CSS. If your CSS rule, your selector is more weighty in terms of points, then it wins the conflict
3:14
All right? So what we're going to do now is jump into the HTML file we've been working on
3:20
And we're just going to go through a few different rules and see what happens when they conflict with each other
3:25
All right, gang, so here I am back in the HTML and I've stripped out all of the CSS
3:29
we've been working on so far and I just want to start playing with these rules and see what
3:34
happens when we've got different specificities in them so we're going to start out by using
3:39
this main content idea that I've added in and we're going to type these P tags within the
3:44
main content ID so to do that remember I put that hash sign and then I do main dash content
3:50
and then I put a P to signify that I want to get all the P tags within that main content
3:56
So I'm going to colour all these red and then underneath this rule I'm going to add another one
4:02
and this is just going to go after all the P's and they're going to colour those black
4:07
So what we're going to expect here? CSS comes in, find this rule first of all
4:12
It says, hey, there's an ID in here. Now how many points is that worth? 100 or whopping 100
4:17
And then it finds this P tag here and it says how many points is that? That's one
4:21
So in total we've got 101 points. Okay? Now it finds this rule here and it says, well, hey, you're just a puny little element selector on your own
4:30
I'm only going to give you one point. So we have this one here, coloring peas black and this one coloring peas red in the main content
4:37
Now this one's going to win because it's 101 points and this is only one point. So you're going to find that every P tag in the main content is going to be red
4:46
This one here outside of the main content is still going to be black because it's not covered by this rule
4:51
It's not within the main content. Alright then, let's give this a whirl, show this in Explorer, and then we're going to open up in Chrome Canary
5:05
And there we go These two here are red within the div the main content and this one here is black So what can we do next
5:16
Well, imagine that we wanted to override this red text for just the second one here
5:23
Now what a lot of designers will do is come in here and say we'll give this a class of, I don't
5:29
know, we'll just use the word test for now, it's not important. So I'm going to use this class here to grab a hold of this P tag and I'm going to color
5:37
that a different color. So I'll say test, remember that always starts with a period or full stop, depending on where
5:43
you're from, then the class name, test, and that's going to target this tag here or whichever
5:48
tag is given a class of test. Now I'm going to color this green and hopefully that should work right
5:57
You know, I'm overriding this one here. I'm saying all test classes give that a color of green
6:02
let's see what happens. What? Okay, so it's no green. Now what's going on? Hmm
6:13
Well, this is what's happening. The CSS is starting at the top
6:18
It's finding this rule, which we remember is 101 points. So all these are currently red, all these peas here
6:24
It's coming down here. This is one point, so it's going to say, nah, I don't want to override these ones here
6:28
I'm not going to color those black. They're still red. Then it's finding this
6:32
test here, this test class, and it's saying, okay, we want all a test class is colored green
6:37
but I'm not going to do that, and you know why? Because a class only has 10 points. 10 points
6:43
that's all it has, and ID has a massive 100 points. So this wins. Why am I going to color this
6:48
green when you've not given it a value more than 101 points? So this isn't going to work
6:55
and this is where a lot of designers fall flat on their faces. They're pulling the hair out
6:59
pulling the teeth out, thinking, why in earth is this not working? You know, I'm giving it a class
7:03
I'm explicitly saying, colour these green. So, work, damn you. No, it's not going to work like that
7:09
It's not flexible CSS like that. It has these rules and you have to obey them
7:14
Okay, so to get around this, what you could do is you could embed anything that you want green in a strong tag
7:23
Okay? And remember, because this P tag is the pairing element, this strong tag will automatically
7:29
inherit these p tag styles so automatically this strong tag is going to be
7:36
colored red however if we put a rule saying strong here we going after the strong elements and color those green then what we saying is we want to get the strong tags and override that inherited style that the p tag has given us and color it green now you might be saying well hang on this is just one point how is it that this can override this one which is 101 points well i tell you this is why this rule here is targeting the p tag is it not
8:07
So it's going to color the P tag red. It's not targeting the strong tag
8:13
The strong tag is only red because it's inheriting the P tag styles by default
8:19
Now, that doesn't hold any weight, okay? If I was to put here main content strong, that would directly go after this strong tag
8:30
and then this wouldn't work. But I'm not doing that. I'm saying main content P, so it's targeting the P tag and coloring those red
8:37
The strong tag is only red because it's inheriting that, but I can override that by writing a rule explicitly for the strong tag
8:47
This is only implicitly targeting the strong tag. This is explicitly targeting it
8:53
Okay, so that's why it overrides it. So let's view this in a browser and make sure it's worked
9:00
Put in Chrome Canary. There it is, see, Ninja's Green. hallelujah it's worked so again this is worth 100 points an ID a class is worth 10 points and an
9:16
element is worth one point whichever selector has the most points wins if selectors are
9:23
identical like this these two p tags the bottom most wins because of the cascade
9:29
all right so that should hopefully give you a good understanding of how these
9:36
conflicts work when it comes to specificity. So if you have any questions whatsoever, feel free to dive down below and comment
9:44
I'm going to answer all of those, obviously. Please like these videos
9:49
If you enjoy them, also share them and subscribe. There's going to be another one coming up very shortly where we're going to talk about
9:55
the important rule. That's the final tool in conflicts. I'll see you guys in that one
10:06
You know