This course may contain valuable CSS information for reference, but does no longer reflect our course quality standards.

Check out a free preview of the full CSS In-Depth, v2 course:
The "Specificity Introduction" Lesson is part of the full, CSS In-Depth, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Estelle introduces the concept of CSS specificity and how the final style gets applied based on its selector weight.

Get Unlimited Access Now

Transcript from the "Specificity Introduction" Lesson

>> Estelle Weyl: One thing, I'm going to cover specificity twice. I'm gonna cover it now briefly. Because I'm gonna talk about it throughout the talk, and I'm gonna talk about it more in depth later. So, when I talk about specificity, I'm going to say things like 0-0-1, 0-0-1 is basically the weight.

[00:00:25] So the lowest weight is the one on the right-hand side. The one in the middle is the medium. And the biggest strength is on the left. So no matter what you have in this position right here, if you have 0-0- 24. That will be less specific than 0- 1- 0.

>> Estelle Weyl: It's basically when you're comparing specificity you compare the different columns and which ever one has the highest number. In the most, in the column with the most weight so whichever one has the highest number here wins. If they have the same number here, then you go over to here and whichever one has the highest number wins.

[00:01:11] And if they have the same number in this second value, ops! Then you go over to the third number. And you say, which one has the highest value? And that's the one that wins in terms of specificity. If you have two with the exact same value, so let's say you have, color equals green, and color equals blue, on a paragraph.

[00:01:37] It's both, it's hitting this paragraph you want it to be, but the paragraph has an ID and a class and it's a paragraph, what is the way, which one takes precedence, the one that says my ID, my class paragraph, we'll have 1- 1-1, and so it'll be heavier, it will have more specificity than just 0-0-1 which is just saying paragraph.

[00:02:00] But if you have two things say make all the paragraphs blue, and two things saying make the paragraphs green, it is the one that comes latest in the cascade that takes precedent. So that's the cascading part. There's specificity and then there's the cascade. And then there's inheritance. So I am going to talk about the weight, and so I want to cover this, but we're going to talk about specificity a little later on.