Specificity

[00:00:00]
>> What color is our paragraph text gonna be in this example here? So we've got a div class of blue, inside of that div, there's a paragraph. And our style rule here is class blue equals, not equals but color blue. So what color is our paragraph text is gonna be?

[00:00:17]
>> Still gonna be blue.
>> You think it's gonna be blue? Indeed it is gonna be blue, if you can see that text has changed to blue, I know that's not the most accessible blue color. Do we know why that's gonna be blue?
>> Cuz it applies to itself and all of its children children elements?

[00:00:39]
>> Yeah, that's pretty close, yeah. So, it's due to this concept called inheritance, yeah.
>> Automatically inherits.
>> Inheritance, so this occurs when an inheritable property like color is not set directly on the element itself. But the parent chain is gonna be traversed up until it finds a value for that property.

[00:01:00]
Okay, another one. What happens now? So now we've got two style rules here. We've got paragraph color red, that's the type selector, and then we've got a class selector with color blue. It could be two options, so which one do we say? You got a 50% chance.
>> I'll say red.

[00:01:18]
>> Yeah, the paragraph is-
>> Say red.
>> Yeah, enforced now to be in red.
>> Yeah, totally right. So, do we know why?
>> I'm assuming because it goes up the inheritance tree until it finds the first match
>> It doesn't actually need to traverse the tree in this case, right?

[00:01:42]
Because our paragraph has a declared style rule, but it would. So, if there was no selector that matched that paragraph, it would traverse up and look for, okay, maybe the direct parent has a color set on there. Okay, last one. So now again we've got our two selectors, but any guess what the color now is going to be?

[00:02:06]
>> Blue.
>> Blue, yes, absolutely. You wanna guess why?
>> It's the stronger specifier, I guess I would say.
>> Stronger specifier, yeah, totally true it has a higher specificity.
>> Yeah.
>> Absolutely, and we're going to learn what that means right now actually. So specificity is that algorithm that our browsers are using to determine what CSS declaration should be applied.

[00:02:37]
So every selector that we write has a calculated weight, and it's kinda like a survival of the fittest, the most specific weight wins. It does get a little bit technical, so you don't need to memorize how this calculation is run. I think the more practice you get, the more easily identifiable these things will become.

[00:02:55]
And it really only matters if you have two selectors that are trying to style the same exact element, that's when this really comes into play. So, when we calculate specificity, we use a three column approach here. For every ID selector, we add 1 to the ID column. For every class selector we add a 1 in the class column.

[00:03:15]
And for every type selector, we add a 1 in the type column. Now, the ID column is the most specific, followed by class, and then by type. And to get that specificity value, we're gonna add up the values of all of the columns to get the final specificity weight.

[00:03:29]
So, let's take an example. So, given the specificity calculation rules, we can calculate the specificity of this, and we'll do the first one together. So, the first selector is a class selector, so we're selecting all elements with a class of body. So that's gonna put a 1 in the class column.

[00:03:51]
And then we are also targeting the type selector for paragraphs, so you get a 1 and the type column. So this is gonna give us a specificity of 0-1-1. Does anyone wanna take a guess what this one might be? So remember it's id class type.
>> 2 for in the class column, and then 1 in the selector column?

[00:04:20]
>> Yeah, 1 in the type column,
>> Type colomn, yeah.
>> Yes, so, yep, it's gonna be 0-2-1. There are no ID selectors, there are two class selectors, and one type selector, yep. Okay, last one. Anyone wanna guess what this specificity will be?
>> 1-1-0?
>> 1-1-0, absolutely it is.

[00:04:43]
We have one ID and one class. Now, the caveat here, inline styles. Inline styles have a higher specificity than the ID selector, and we just said, ID is the highest specificity column, right? But inline styles overrule that. So let's take an example. In our CSS, we are styling an element that has an ID of text to be red.

[00:05:08]
But we can see in our HTML here, we've got style equals color blue. Now because inline styles override IDs, it's going to be blue. Now, there's also this notation called important. So this marks the style rule as important of all things, right? It's gonna override all the other styles.

[00:05:32]
So what might that look like in practice? So we still have our style equals color blue in line, but now we've got the ID selector text, we're setting the color to red, and noting it as important. So this takes precedence, and the text will be red. Now, adding this important declaration can make it really difficult to create maintainable CSS code.

[00:05:57]
And it might actually be necessary to use it when you're working with third party libraries or CSS libraries, just the way that they're structured. But always try to write a higher specificity selector instead of adding important. You can add important if you're trying to debug, right? But generally it's better practice to not ship this to production.

[00:06:17]
So specificity calculations, again, are gonna come into play when you have multiple selectors trying to style the same element. If there are two or more declarations that provide different property values for the same element, so if we have two selectors trying to style the color of one element, the most specific selector wins.

[00:06:37]
>> Let's say a selector has more than ten classes, will this selector be more specific than an ID?
>> No, the ID selector wins. So if there's one ID that will overrule ten. I can show you a little trick to calculating this. If you're curious, there's a specificity calculator.

[00:07:05]
So let's say we have one, we'll call it ID. And then let's say we've got class1, I'm not gonna do ten, we'll do like four, class2, class3, class4. But the question as well is this one element with four classes, or is it gonna be four spaces separated, right?

[00:07:32]
So four children. If we click sort by specificity, you can see ID is still on top, so it's still gonna be the most specific. But that was a great question. It's not the quantity in the column, it's, we start at ID, if there is an ID on one element and not on a second, the first element wins.

[00:07:54]
But you can use this tool, if you're uncertain, you can plug these in. Yeah, Mark.
>> Do media queries add points?
>> That's a great question. I think the answer is no, I'm not a hundred percent certain. We will see pseudo classes, and is it pseudo elements? In a later chapter, we're gonna discuss how those will add weight, but I don't believe media queries add specificity.

[00:08:17]
Let's Google it together. Do media queries add specificity in CSS? They do not affect specificity according to this random website I found on Google. So my answer is gonna say no. But, If we go to CSS tricks here, does the media query increase specificity? No, that's also a great question.

[00:08:46]
But there are a couple other caveats to the specificity weights. Like I mentioned pseudo classes, pseudo elements, we'll get to those later on. So here's an unordered list, it contains three list items. Each list item has a link in it. So given the following CSS, what color will the links be?

[00:09:02]
We're gonna walk through this together. I know it might be a little bit hard to see this, we're gonna zoom in on some of the CSS code here. This is what the output looks like. So links 1 and 3 will be blue, and link 2 will be red.

[00:09:14]
But let's actually walk through how, how does this come to fruition? So, the first selector. We're going to tackle the second link here, the one that's red, we're gonna figure out why it's red. So, the first selector has one type, so it's weight is 0-0-1. The second selector also has a one type, so it's 0-0-1 as well.

[00:09:37]
The third selector has one in each column, so one ID, one class, one type selector. The fourth selector has one type and one class, so that's 0-1-1. The next one has one ID and one type. And the last one has one ID, one type, and one class. So I know that's a lot, and you won't have to probably do this day to day.

[00:10:06]
But it's good to understand how these are calculated. So when we zoom back out, these are the weights that we're working with here. So now let's just look at the styles or the selectors that are aiming to style the second link. So if we start in that left column, that ID column that I just mentioned, let's compare which selectors has the highest ID column weight.

[00:10:31]
So three of our selectors have a one in the ID column, so that's gonna be the third, fifth, and sixth if my math is correct. So, all these three selectors still have a 1 in the ID column. We move one space to the right, to the class column, they also all have a 1 in the class column.

[00:10:50]
So now we move to the third column, the type column. So we can see here, just the third and the sixth selector have a 1 in the type column. But these selectors are tied. So, the first one is trying to style this link with a color of yellow, and the second one is attempting to style it with a color of red.

[00:11:09]
If two or more selectors have the same weight, the most recent one wins when you're reading it from top to bottom on your file. So because the bottom one is at the bottom, it wins, and so the color of this link is going to be red. But what about the other links?

[00:11:26]
What colors are those gonna be? Selectors one, two and four are the selectors attempting to style the rest of our list items. So we can follow that same methodology of calculating the weight, starting with the ID column, they all have zeros. In the class column, you can see, number four has 1 in the class column.

[00:11:42]
So that wins and the rest of the links will be blue. But there's something a little bit odd here. Why is the dot for link two still blue? So this is because we're only setting the style of the link element and not the actual list item, right? So the list item, that dot, it's going to inherit that color blue.

[00:12:05]
So like I had mentioned for one of the questions, there is a specificity calculator, so if you've got a couple of selectors you're uncertain which one is the most specific, you can plop them in here, and it'll help you out. So, we've learned about the history of CSS, we've learned about different types of elements, replaced, non-replaced, block, and inline.

[00:12:23]
We learned a little bit more about selectors, specificity, and inheritance. So next step, in the next chapter we're gonna start building our project, but before that we'll learn some of the skills needed for that first portion.