Name: 11分でCSSの特殊性を学ぶ (Learn CSS Specificity In 11 Minutes)
Uploaded: 2021-01-14T10:22:03.000Z
Duration: 11 min 26 s
Description: VoiceTubeの動画で発音を聞きながら英語表現を覚えよう！学べる英語：

現在進行形

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

法助動詞 A2

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.

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

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

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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 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.

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

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

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.