CSS Specificity Demo

[00:00:00]
>> Let's take a look at a demo of how specificity can work. And to make this demo work really particularly well, we're gonna work from the bottom of the stylesheet going up. To show you that this is not a matter of what comes later in the stylesheet is what is applied.

[00:00:15]
I'm actually gonna start at the bottom of the stylesheet and go backwards. So that you can see that the cascade isn't in effect at all in these particular demo that I'm showing you. This demo comes from Manuel Matuzović, who is from HTMLHell, a great website, I totally recommend it.

[00:00:33]
He wrote this demo originally with just a colored square, I've rewritten it with colors and fonts so that you can see the big differences between what happens as we change selectors. So we start here with the words Frontend Masters, they are taking on the style from the browser style sheet, so it's black.

[00:00:53]
It is Times New Roman, and you'll see here, I've added a font size of 3rem, just to make it bigger on the screen so you can see what's going on. Now what I'm going to do is I'm going to uncommon these styles one at a time and show you how they take effect here on the screen.

[00:01:14]
So the first style that I have here, which is almost the last one in the style sheet, the last one being the font size, is where(p). What is the specificity of that? Remember where has no specificity at all including what's inside of the parentheses. And so I have made it the color of blue and the font family of Barrio, you can see that it's changed kind of radically there.

[00:01:40]
We can override that simply by using our paragraph. And so now I'm changing this to red, and a font family called covered By Your Grace. So that has a specificity of 001. It is just a type selector, it's going to take priority over where(p) even though where(p) comes later in the style sheet.

[00:02:06]
Now, we can take advantage of classes, you'll notice here in our HTML we do have a class. So I've used that here, I've changed the color to medium orchid, and the font family of Faster One. And you can see that the class is beating the paragraph, probably something you would expect to happen.

[00:02:24]
We're changing that again, but adding paragraph dot, the class name that indicates a paragraph with the class of in this case femClass together. And we are using the color green and the font family of Joan. Now, one of the tricks that you can do if you need to increase your specificity but you don't have access to the HTML, is you can double up on classes.

[00:02:52]
So here we've put in femClass, femClass, dot, dot, next to each other to indicate that we've declared that class twice even though it only appears once in the HTML. By putting it in twice, we have bumped up our specificity, so the specificity here is what? 0-2-0 as opposed to earlier here on the page where we had it as 0-1-1 or even earlier where we had 0-1-0.

[00:03:24]
So by doubling up on those class names, you can raise the specificity and that is sometimes helpful. We'll make it even stronger for the specificity here is styling via ID, so this is femID. We've made the color brown, and we've made the font family now Major Mono Display.

[00:03:47]
So of course, the specificity there is 1,0,0. Raise this specificity again by putting a p in front of it. p with the ID means that the specificity is 1,0,1. And now, we have a different color and font. We can also of course, combine our ID and our class.

[00:04:11]
Now, our specificity's up to 1,1,0, so we have our class and ID together to change the font again. We can double up on our ID to raise our specificity to 2,0,0 and change the font another time. And here we are using is, so in this particular selector, we're saying the ID, femID, is either the femID or it's invalid, invalid, so basically, we're doing a test.

[00:04:51]
So if the element with an ID of femID, happens to also have an ID of femID, little redundant but it works, or something invalid, then style it this way. So the first item is true, the second item is not, is applies in this case. What is the specificity?

[00:05:12]
We would count the most specific selector here inside of is, which would be invalid invalid, so that counts for two, plus the one outside of it so this is 3,0,0. Now, comes the one that sort of blows people's minds. I'm back to a specificity of just the p again, okay?

[00:05:30]
But I am changing the color of the font via animation. This is a little preview for what we're gonna look at when we look at the cascade. Anything having to do with the animation will actually take priority, even over the most specific selectors that are out there. And in this case, as you can see it's not really moving, so the animation is pretty quick at zero seconds.

[00:05:55]
But it's enough to change the font family here to a different color and to a different font. And then finally, just to show you the impact of important on all of this, the most specific one of all is when we start throwing in our bang importance. So here I've put a bang important by the color, a bang important by the font name, and that will take priority over everything even though it occurs earliest in the document.

[00:06:23]
So these last two styles that I've applied here, these last two rules for the importance and with the animation, are actually the cascade taking priority over specificity. It's sort of a sneak preview as to what comes next. But prior to that, from our crazy is selector and going further down the page, that is all specificity that's there in action in this particular demo.

[00:06:49]
>> There's been like thanks, great, wow, interesting-
>> Okay.
>> Through the day so far. But as Sanjana, I don't know, sorry if I butchered your name, says beautiful demo by the way.
>> Yeah, so all the thanks here to Manuel, appreciate it. He does great work, his blog at HTMHell, fantastic, encourage you to read it.

[00:07:21]
>> What do you think about the use of important? Do you think it's overused-
>> Yes.
>> And should be avoided?
>> Yes, we're gonna talk about that though in a couple of little segments here. We will talk about important.
>> And then they're asking if you could share the demo?

[00:07:37]
>> Share the demo?
>> It's on the course.
>> Yes, the course website if you didn't join us yesterday, this is semantics-selectors.css.education. I think Mark is gonna put it in the chat for you. And we are currently on chapter five, specificity, and we we're just looking at part one, the specificity demo.

[00:08:02]
And in my comments here, I've referenced the original demo, and then of course, I made some adjustments to it.