Up next in 10
Learn CSS Specificity In 11 Minutes
997 views
Feb 7, 2024
"Learn CSS Specificity In 11 Minutes" is an instructional video focused on explaining the concept of CSS specificity in a concise manner. Specificity determines which styles are applied to HTML elements when conflicting CSS rules are present. In just 11 minutes, viewers are guided through understanding the hierarchy of specificity, including inline styles, IDs, classes, and element selectors. The video provides clear examples and practical demonstrations to help viewers grasp how specificity affects the styling of web elements. Whether you're a beginner or an experienced developer, this video offers valuable insights and techniques for managing CSS specificity effectively in your projects.
View Video Transcript
0:00
Hello everyone, in today's video I'm going to be talking about one of the most important
0:05
CSS concepts, and that is CSS specificity. And the reason this is so important is because almost certainly you've run into the problem
0:14
where you can't overwrite styles because other styles are more specific and you're not
0:19
really sure why this is. Well, in this video, I'm going to clear up all of that confusion and make it so much easier
0:25
for you in the future. So let's get started now. Welcome back to WebDev Simplified
0:34
My name's Kyle, and my job is to simplify the web for you
0:37
So if that sounds interesting, make sure you subscribe to the channel for more videos just like this one
0:43
And now, to get started, I just have a really simple HTML document with an H1 and a P tag
0:48
and this H1 has a class of header, and this P tag has a class of text, and then we have very simple
0:53
styles changing the header to a color of red, and the text to a color of green
0:58
And as you can see over here, we're getting an output of a red header and green body text
1:03
And this is all great, this all makes sense. And something else that you're almost certainly familiar with is that if we had the exact same
1:09
selector twice instead of our CSS and the bottom one gave a color of blue and the top one
1:15
gave a color of red, when we save this, of course our text is going to change to blue, and
1:20
that's because CSS reads top to bottom. So something that's on the bottom is going to overwrite things that are on the top
1:27
this becomes a problem though is when you have two different selectors so for
1:31
example we have H1 here and header here they both select the same H1
1:36
element this header right here but they're actually different selectors ones in
1:40
H1 and one is the class of header so based on our old logic the color would
1:45
be blue instead of red because H1 comes later but if we save you'll see it
1:49
actually changes to red and that is due to specificity essentially what
1:54
we're saying here is this class is more specific than this H1 selector so it's actually going with the class selector because it's more specific
2:03
Also, we can see the same thing happening by using IDs. As you can see, we have header ID down here
2:09
So we can select that header ID and we can change the color to be, for example, black
2:15
And now if we say that, you can see our color is now black. And that's because IDs are even more specific than classes
2:23
And the way that CSS uses this specificity to determine how an element is actually
2:27
selected is it takes a combination of all the different types of specificity and then compares
2:32
them. So what happens is you get essentially a four digit number or four different numbers
2:37
So for example we have four numbers 0 0 0 and this is something with zero specificity at all
2:45
And the way that ID work is it fills in this third column So this selector right here has one ID zero classes zero elements and zero inline styles So it is a specificity of 0 If we go down here
2:58
we have a specificity 0, 0, 1, and then 0. And the reason that this works this way is because
3:06
classes take up this second section of the specificity. And if we come all the way down here
3:11
to our H1, this has the specificity of 0-0-1. And again, to reiterate the specificity, this very first number here on the right, this is going to
3:20
be the number of element selectors. So H1, A tag, P tag, all of that generic element selector stuff is going to come in this
3:28
very first number. Our next number is going to be the classes that we have
3:32
So for example, dot header, down here we have dot text. So for each class we have, we're going to add one to this number
3:39
Next our third one is going to be for our IDs. So for each ID that we have, we're going to add one to the third number
3:45
And then lastly, this fourth number is for inline styles. So if I come down here and I make a style selector for inline styles, and I want to set the
3:53
color to, for example, cyan, and I say that, you'll see our color has changed to cyan
3:58
And that's because this is using the specificity here of 1-0-0. So as you can tell, the specificities are calculated by first looking at the first number
4:08
and if the first number is larger, it uses that specificity. In our case, this 1 here is larger than all of these others which start with 0, so we
4:16
know we're going to use the inline style. Then if all the numbers are the same, so in this example, all these start with 0, so it's
4:22
going to move on to the second number for the IDs. As you can see here, we have 1, so 1 is larger than all of our zeros, and it's going to
4:29
use the header ID. If for example this was not here and our inline style was not here, then we can see we have
4:35
0 in both the first two spots, so we go to the third spot, which has a number of 1
4:39
bigger than zero, and we do the same thing for the four spot if we need to
4:44
Let's back that up. We'll remove our inline style for now. Just like this. There we go. So now we have backed that black test based on our ID up here
4:53
Let's actually remove this, and let's create more selectors. Let's add another class here
4:58
We can just say a class of header 2, and then we can say header 2
5:05
and we're going to set the color here to, let's say, green
5:10
Just like that. And now if we save it, you can see our text has changed to green
5:15
And that's because this has a specificity of 0-0-1-0. These two have the exact same specificity, so it's going to go on with whichever one is later in the code
5:26
And header 2 comes after header up here, so we know we're going to use header 2
5:30
Also, if we were to change this header to be header with an H-1, now our specificity
5:35
changes to this 0 and this is 0 So we compare the zeros that are the same we compare the 1 it the same and now we all the way into the 1 and the 0 and this 1 is obviously larger So if we comment
5:47
these out, just so our CSS will work properly, and this last one, and we save, you'll see
5:53
that our text is going to be read up here. And that's because this has a higher specificity
5:57
than this header 2 down here. And that's because we have this extra element selector being
6:02
added on. We could also, for example, come down to this one, and we could say body, and
6:07
then space, so it's saying that any class header 2 that's inside the body, that changes
6:11
our selector to this, and now our text will be green. And these selector specificities don't act like normal numbers, so for example, this could
6:20
actually say 12. You wouldn't write that, for example, as this, where it would be 0,0, 1, 2, that's not
6:27
the same, this 12 is actually just 12 elements. That'd be like saying div 12 times in a row, this is 12 element selectors, or for example
6:35
12 class selectors. It doesn't actually overflow. So for example, if you had an ID selector
6:42
as we already know, we have header, oops, ID, and we can change the color back to black
6:47
here. We know that this has a specificity of 0-1-0. Whoops, just like that. And now if we
6:55
had an example that had 12 classes, for example, so if I had header, just 12 different classes
7:01
on this header all in a row, all in one single selector here, I would get this, 0-012
7:05
Well, it first compares the first number 0,0, and then compares this 1-0, and 1 is
7:11
larger than 0, so it completely ignores this section with the 12, and it will go with
7:15
our header ID no matter what. So again, if we save this, we're going to go back to a black text, and that's because
7:20
our header is the most specific selector we have. One way to get around specificity, though, is to use the important keyword
7:28
So if we come down here and rewrite exclamation point important at the end of our style, this
7:33
is essentially like its own level of specificity. kind of like a fifth level, so it would be almost like having one, zero, zero, zero
7:42
this is almost like having that extra fifth level of specificity. So now when we save this, you see it changes to green
7:48
And that's because important essentially overwrites everything that comes before it. It is more important is what it's saying, so it's saying just ignore specificity and go with
7:57
this important style. One thing to note about this specificity though is it follows the other specificity rules
8:03
So if we were to change this to important and save, you can see our text change back to red
8:09
And that's because this has a higher specificity than the header 2 down here, and they both
8:13
have important. So the importance almost cancel each other out, because this is going to say 1, and then we
8:19
have this selector here, 0,001, and this has a selector which is 1,011
8:26
So this specificity is slightly higher than this specificity down here In general though you should never use important because now that I have a selector this Red Style the only way to override Important is to use another important style and to make
8:40
it more specific. So I'd have to, for example, say H1 here, that way they have the same exact specificity
8:46
and it'll become green because it's later in the code. Important is really hard to work around, so I almost never use Important and highly
8:53
suggest that you also do not use Important. Now it's real click, simplify this code
8:58
to some of our basic selectors, we could just have header, and that header is going to have
9:03
a color of red, and then we have, whops, header 2, and we'll change that color to black
9:12
So as you can see, our color is black, because header 2 is coming after, header 1, and
9:16
they have the same specificity. Some things that don't actually change the specificity though is if we put body here, now we
9:23
know this will increase the specificity, but if we put in, for example, the direct sibling
9:27
selector. So if we compare these two to each other, this is not more specific than this
9:32
You'll see our text is still black. And that's because this sibling selector is ignored
9:37
If we had a plus here that would be ignored. Any of these additional selectors are just completely
9:41
ignored. It only takes care of the class selectors, element selectors, IDs or the important
9:47
keyword, and then lastly of course those inline styles. So all of these additional things
9:52
such as direct sibling or sibling, those kinds of things, they don't actually matter when it comes
9:57
to specificity so you can have as many or as little of those as you want in your CSS without
10:01
worrying about ruining your specificity. Now one easy way to check your specificity is if we go inside and inspect our code, expand
10:11
this out so we can see it, and we select that H1 element, we can look at all the styles
10:15
that are being applied to it. And you can see that this body here with the header class is being overridden by this black
10:20
color up here, and that's because it's later in the file. What if we were, for example, to have an ID selector, so we'll say ID, header, ID, and
10:30
we'll change the color to cyan, and save. You can see it's showing us the ones that are being overridden, and we can see that this
10:36
is more specific than this, so that's why we know it's being overwritten
10:41
And when you can inspect your styles like this, you can see, okay, the style I added is
10:44
not changing the color, for example, we can say that this black color is not working, and
10:49
we can see, oh, well, there's an ID selector, that's why. So you now need to make this selector have at least an ID in it
10:55
So if we went over here and we changed this to header ID and saved, you can now see
11:02
it's black because this is more specific than this selector here. So using the debug tools, we can actually see what is more specific and why are certain
11:10
styles are not being applied like they should be. And that's all there is to specificity
11:15
If you enjoyed this video, make sure to check out my other videos linked over here and
11:19
subscribe to my channel for more videos just like. this one. Thank you very much for watching and have a good day
#Computer Education
#Programming
#Skins
# Themes & Wallpapers