Q12: CSS Specificity

[00:00:00]
>> All right, Question 12, order the CSS selectors by specificity. A, B, C, D, E, or F. So the right answer is F, E, D, A, B, C. Now when we work with CSS, there are certain kind of specificity values that kinda like tuple, tuple, I never know how to pronounce that, based on what the selector includes.

[00:00:31]
So first we have inline styles, we have IDs which get a higher value. Then we have classes, attributes, and pseudo classes, which all kinda get the same or have the same priority. And then we have tags and pseudo elements. So just to see an example of this, here we just have one tag, we just have a UL, and that's a tag.

[00:00:48]
So that's the fourth, so that's the weakest kind of. So this one has one tag, so it gets 1. Then we add an ID. So now its specificity is 101 cuz there's zeros in between, so it's 101. Then we add another tag, now it's 102, a class name, 112, another tag, 113, and so on.

[00:01:09]
A pseudo class, 123. Now, of course, if this was an inline style, it would beat all of them cuz it has 1000 instead of 103. So when we go back to our question, yeah, we see that the h1 is one tag. It has a class name and it has an ID.

[00:01:26]
So this becomes 111. Then h1 large text and attribute, so we have a class name and an attribute, which is the third one, so 2. And then one tag is 1 to 21. Same for a large text is a class name and then nth child is the pseudo class.

[00:01:41]
So that one gets 20. With div h1, we have two tags, then we have a large-text class, yeah, so 13 or 12. And then we have that pseudo element, the before, which is also in the fourth one, so that becomes 13. Same for two tags div h1, 2, and then we have the pseudo element first child.

[00:02:01]
Now it's kinda tricky cuz you also have the not and the has, which is kinda like a pseudo elements, but not really. It doesn't get any specificity even though it also uses that, what's it called, parentheses, I don't know, not parenthesis, I don't know. So you have the tag, the h1, and then the not, which gets ignored.

[00:02:19]
There is no value there, even though it looks like a pseudo element, it's not. But then we still have the small text, which is a class name, so it gets 11. So we have 111, 21, 20, 13, 12, 11. So that's why they're ordered like that. And normally, you will probably find selectors with the same value specificity, then it just depends on which one was specified last in the stylesheet.

[00:02:43]
Cuz first you have inheritance, which is the least or has the lowest priority. And then you have tags, which we just talked about, classes, IDs, inline styles, !important in stylesheets, and then !important in inline styles, that one has the highest priority. If you're using an inline style with !important, it just ignores everything else, it will use that.

[00:03:05]
Yeah, so it goes from low to high.