In today's video, I'm going to be talking about one of the most important CSS concepts, and that is CSS specificity.

And the reason this is so important is because almost certainly, you run into the problem where you can't overwrite styles because other styles are more specific and you're not really sure why this is well, in this video, I'm gonna clear all that confusion and make it so much easier for you in the future.

So let's get started now.

Welcome back to Webb.

Have simplified my name's Kyle, and my job is to simplify the Web for you.

So that sounds interesting.

Make sure you subscribe to the channel for more videos just like this one.

And now to get started.

I just have a really simple HTML document with an H one and a P tag, and this H one has a class of header and this P tag has a class of text.

And then we have a very simple styles change in the header to a color of red and the text to a color of green.

And as you can see over here, we're getting an output of a redhead.

Er and green body text.

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 selector twice inside of our CSS and the bottom one gave a color blue in the top one gave a color of red.

When we save this, of course, our text is gonna change to blue.

And that's because CSS Reid's top to bottom so something that's on the bottom is going to overwrite things that are on the top.

Where this becomes a problem, though, is when you have two different selectors.

So, for example, we have a tch one here and header here.

They both select the same h one element, this header right here.

But they're actually different selectors once in a tch one and one is the class of header.

So based on our old logic, the color would be blue instead of red because H one comes later.

But if we save, you'll see actually changes to read.

And that is due to specificity.

Essentially, what we're saying here is this class is more specific than this h one selector.

So it's actually going with the class selector because it's more specific.

Also, we can see the same thing happening by using I d.

S.

As you can see, we have header I d down here so we can select that header I d And we can change the color to be, for example, black.

And now if we say that you can see our color is now black and that's because I d.

S are even more specific than classes.

And the way that CSS uses this specificity to determine how in elements actually selected is it takes a combination of all the different types of specificity and then compares them.

So what happens is you get essentially a four digit number or four different numbers.

So, for example, we have four numbers 0000 and this is something with zero specificity at all.

And the way that I D's work is, it fills in this third calm.

So this selector right here has one I d zero classes, zero elements and zero in line styles.

So it is a specificity of 0100 If we got on here, we have a specificity 001 and then zero and The reason that this works this way is because classes take up this second section of the specificity.

And if we come all the way down here to R H one, this has the specificity of 001 and again to reiterate the specificity, this very first number here on the right, this is going to be the number of elements, selectors.

So each one a tag p tag, All of that generic element selector stuff is going to come in this very first number.

Our next number is going to be the classes that we have.

So, for example, dot header down here, we have got text.

So for each class we have, we're gonna add one to this number.

Next.

Our 3rd 1 is going to be for our i.

D s.

So for each idea that we have, we're gonna add one to the third number.

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 color to for example sayin and I say that you'll see our color has changed a sigh in and That's because this is using the specificity here of 1000 So, as you can tell, the specificities are calculated by first looking at the first number.

And if the first number is larger, it uses that specificity on our case.

This one here is larger than all of these others which start with zero.

So we know we're gonna use the inline style Then if all the numbers are the same, So in this example, all these start with zero, so it's gonna move on to the second number for the I.

D.

S.

As you can see, here we have one.

So one is larger than all of our zeros, and it's going to use the head or i d.

If, for example, this was not here and are in line style was not here.

Then we can see we have zero in both the 1st 2 spots.

So we go to the third spot, which has a number of one bigger than zero.

And we do the same thing for the four spot.

If we need to.

What's back that up we'll remove, are in line style for now, just like this.

There were ghosts Now we have backed that black test based on our idea.

Pierre, what's actually remove this and let's create more selectors.

Let's add another class here.

We could just say a class of header too.

And then we can say Header too.

I'm gonna set the color here too.

What say Green Just like that.

And now if we say But you can see our text has changed it green and that's because this has a specificity of 0010 These two have the exact same specificity.

So it's going to go on whichever one is later in the code and head or two comes after header up here.

So we know we're gonna use header too.

Also, if we were to change this header to be header with an H one now are specificity changes to this 0011 and this is 0010 So we compared the zeros that the same we compare the one it's the same.

Now we're all the way into the one and zero and this one is obviously larger.

So if we come in these out just so, our CSS will work properly.

And this last one and we saved.

You'll see that our text is going to be read up here.

And that's because this has a higher specificity than this head or two down here.

And that's because we have this extra element selector being added on.

We could also, for example, come down to this one on we could say body and then space.

So it's saying that any class, head or two that's inside the body, that changes 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 actually say 12.

You wouldn't write that, for example, as this would be 0012 That's not the same.

This 12 is actually just 12 elements.

That'd be like saying Dave 12 times in a row.

This is 12 elements electors or, for example, 12 class selectors.

It doesn't actually overflow.

So, for example, if you had an I d selector as we already know, we have header Whoops, I d.

We could change the color back to black here.

We know that this has the specificity of 0100 Whoops, just like that.

And now if we had an example that had 12 classes, for example.

So if I had header just 12 different classes on this head are all in a row.

All in one single selector here, I would get this 00 12 0 Well, it first compares the first number 00 and then compares this 10 and one is larger than zero.

So completely ignores this section with the 12 and it will go there a header, I d no matter what.

So again, if we save this, we're gonna go back to a black text and that's because our header is the most specific selector we have One way to get around specificity vote is to use the important key word.

So if we come down here, rewrite exclamation point important at the end of our style, this is essentially like its own level of specificity.

This is kind of like 1/5 level, so be almost like having one 0000 This is almost like having that extra fifth level of specificity.

So now when we say this, you see, it changes to green 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 this important style.

One thing to note about this specificity, though, is it follows the other specificity rules.

So if we were to change this too important and say, you can see our techs change back to red, and that's because this has a higher specificity than the head or two down here and they both have important.

So the importance almost cancel each other out because this is going to say one.

And then we have this Lecter here 0001 and this has a selector, which is 10011 So this specificity is slightly higher than the specificity down here.

In general, though, you should never use important because now that I have important on this red style, the only way to override important is to use another important style and to make it more specific, so I'd have to, for example, stay h one here.

That way they have the same exact specificity, and it'll become green because it's later in the code.

Important is really hard to work around, so I almost never used important and highly suggest that you also do not use important.

Now it's real quick.

Simplify this code back to Cem, our of our basic selectors.

We could just have header and that header is going to have a color of red and then we have whoops Header to on what changes that color to black.

So as you can see our colors black because head or two is coming after her one and they have the same specificity.

Some things that don't actually change The specificity, though, is if we put body here.

Now we know this will increase the specificity.

But if we put in, for example the direct sibling selector So if we compare these two to each other, this is not more specific than this.

You'll see our text is still black and that's because this sibling selector is ignored.

If we had a plus here that would be ignored.

Any of these additional selectors were just completely ignored.

It only takes care of the class selectors, elements electors, I d s or the important key word.

And then lastly of course, those in mind styles.

So all of these additional things, such as direct sibling or sibling those kinds of things they don't actually matter when it comes to specificity, so you can have as many or as little of those as you want in your CSS without worrying about ruining your specificity.

Now one easy way to check your specificity is if we go inside and inspect our code expand, this absolute can sit, and we select that h one element.

We can look at all the styles that are being applied to it, and you can see that this body here with the header classes being overridden by this black color up here.

And that's because it's later in the file.

But if we were, for example, to have a i D selector so we'll say I d header I d on.

We'll change the color to science and save.

You can see it's showing us the ones that are being overwritten, and we can see that this is more specific than this.

So that's why we know it's being overwritten.

And when you can inspect your styles like this, you can see okay.

The style, I added, is not changing the color.

For example, we can say that this black color is not working and we can see Oh, well, there's an I d selector, that's why.

So you now need to make this selector have at least an idea in it.

So if we went over here and we change this two header I d and say you can now see, it's black because this is more specific.

The Miss selector here.

So, using the debug tools, we can actually see what is more specific.

And why are certain styles are not being applied like they should be.

And that's all there is to specificity.

If you enjoy this video, make sure to check out my other videos linked over here and subscribe to my channel for more videos just like this one.

Thank you very much for watching and have a good day.