OK.
So in this video we're going to cover two important topics and see assess that we haven't really talked
about yet and those are inheritance and specificity.
So to start we're going to demonstrate the way that inheritance works and see assess.
So I have a simple file here.
It has a single well with four allies inside and I'm going to write my styles in a style tag just to
make it easy for you to to watch you don't have to watch me flip around between files.
But it's always better to actually do this in an external style sheet.
So I'm going to style the UL and give it a color of purple and when I do that
you'll see that when I refresh the allies actually become purple.
So what happened there.
You know I styled the area where they styled the UL and the lie was indirectly changed and it inherited
that color from the parent element.
So let me show you another example of that.
Let's add in just a paragraph here
it starts off black and I'm going to come and tout this you will purple for now.
So everything is just normal black text.
I'll make this a little bigger if I go in my style and I say body and I give the body a color color
red and I refresh this.
You'll see that everything is red.
So this is just demonstrating this concept of inheritance where if we set a property on a parent it
can also affect a child element.
So this is nice if we want it to make all paragraphs and allies all read.
We don't have to sit like paragraphs and turn them read and then select allies and turn them red.
We can just select the body.
So the next thing that I want to show is what happens if I go in here and then I decide that a paragraph
I actually want it to be green.
If we refresh we'll see of course that the paragraph turned to green.
Likewise if I want the ul to be green or let's do blue and I save and refresh the UL turns blue and
so do the allies because they inherit from that.
So what's happening here is actually demonstrating this idea of specificity and CSSA.
So we have multiple styles that could be impacting this same ally.
It could be red and it starts out as red and then returning it blue because all you are supposed to
be blue.
So if we go ahead and inspect one of these elements and I'm going to make this fullscreen and I'm going
to increase this and increase the font size a little bit too you'll see that the color is set as blue
coming from a UL and it tells us inherited from UL and if we keep scrolling you'll see inherited from
body.
The color is red but it's actually crossed out and so that means that it's not being applied at all
.
And instead this style is being applied.
So this shows us this style is attempting to be applied or it is targeting this element that we have
selected but it's crossed off which means it's not actually being applied.
So the next topic which is very closely related to inheritance is called specificity.
So specificity is this idea in the sense that we can have multiple styles targeting one element and
that's happening right here.
We have multiple styles targeting this one UL or this ally for instance.
The lie is being turned red or it's being targeted by this line.
Body turning everything in the body red.
And it's also being targeted by this line which turns everything in the all Juelz blue.
And so then the SS has to decide which one wins.
And in this case whatever style is closest to this element.
So whichever one is more specific and so what that means is the body is very general it's everything
.
And a UL is more specific that when it's going to win out.
But this is just a simple case.
So now let's up the ante a little bit and add in some more selectors.
So let's go ahead and add in a direct ally selector and let's make an ally orange.
And as you would expect it makes all allies orange.
And if we open up the inspector we'll see it's being turned red by the body but that's crossed off.
It's being turned blue by the UL selector and then it's being turned orange by the fly selector and
that one wins out.
So these are all simple cases where it's pretty clear which one wins.
But now let's introduce something on top of this.
Let's now say I want this to have a class called highlight
and I'll give it to two of them and then I select this class highlight and I give a background color
.
Actually let's just stick with color.
Just so it's all the same property color of yellow and I save.
Which one do you think is going to win out now.
Let's check and you can see that the highlight class wins and it's turned yellow because of that high
like class.
So this is showing us something where in L.A. We're directly targeting all allies and making them orange
and then we're also directly targeting a few allies that have this class and making them yellow.
And in this case this class wins out.
So there are actually very specific rules for how this works and I'm going to show it to you in just
a second.
But before that I just want to add one more example in so let's say also give this element an I.D. and
I'm going to call it special.
I'm going to target that element special and I'm going to give it a color of pink and I refresh.
You'll see that that element wins out.
And one more time if we inspect you'll see that we have a style from the body that's not applied one
from the well that's inherited but not applied one from the lie that it's not applied one from the class
that is not applied.
And then one from the ID special that is applied.
So in this case the ID wins.
So as I mentioned there are very specific rules as to how this works.
And I've written them up down here.
But actually I'm going to go to M.D and first to show you they have a great article on this that I highly
recommend that you read and it talks about how specificity is calculated.
So when she sees that there are three or four different colors that this one could be.
How does it know which one to pick.
And the way that it does it actually runs the calculation so it assigns a numeric value to each of those
selectors.
So it's going to assign a numeric value to this here and then to this one and then to this one and to
this one.
And as we know this one wins out.
So the way that it's actually calculated we don't actually have to know the exact math but I will show
it to you here.
There is a calculator that we can actually type things into online that will tell us how specific something
is.
So if I just select all allies you'll see it has the specificity of one.
Now let's try slutting that class highlight and that is 10 times as specific as the specificity of 10
.
So that's why a class 1 out over the lie.
And that's why this element is actually yellow because that class highlight won out over the orange
color.
Now if we go and we add an I.D.
or what we call a special you can see that is 100 times more specific than just the law tag.
So that one wins out and that also beats the class.
So the basic rule here is that element selectors tag names are not very specific class selectors are
much more specific and then IDs are the most specific that you can get.
And I'll also show you it's not limited just to one ID.
So let's say we wanted to know what is more specific.
I have a class and another class inside of it.
So this is a descendent Selecta remember this is only 20 specificity.
And if I just have a single I.D. That's 100 specificity.
So again I don't want you to think that you need to be using the site all the time and calculating numbers
.
That's not important.
All that you need to know is the order of magnitudes so I'll go to my notes here and have them written
out type selectors are the least specific.
So that's going to look like something like this or ally with an ATF inside of it or even the adjacent
selector.
So these selectors are not very specific.
But even within this year this is going to be more specific than this.
This is going to be more specific than this as well because there are two elements that we're referencing
.
So if we actually calculated it this is specificity of one.
And this is two.
Then the next level is a class.
So this is going to be an order of magnitude 10 times bigger or more specific than any of these.
And so is the attribute selector.
So where we have things like input type equals text and so are these pseudo class selectors which are
things like hover.
So a tag on hover or input that's been checked and other things like that that have this colon there
.
And then the very most specific thing is the I.D. selector.
And so that is going to be another order of magnitude greater or more specific than the selectors here
.