1
00:00:00,970 --> 00:00:01,550
OK.

2
00:00:01,590 --> 00:00:06,090
So in this video we're going to cover two important topics and see assess that we haven't really talked

3
00:00:06,090 --> 00:00:10,650
about yet and those are inheritance and specificity.

4
00:00:10,650 --> 00:00:15,670
So to start we're going to demonstrate the way that inheritance works and see assess.

5
00:00:15,690 --> 00:00:17,730
So I have a simple file here.

6
00:00:18,000 --> 00:00:25,200
It has a single well with four allies inside and I'm going to write my styles in a style tag just to

7
00:00:25,200 --> 00:00:30,050
make it easy for you to to watch you don't have to watch me flip around between files.

8
00:00:30,210 --> 00:00:33,800
But it's always better to actually do this in an external style sheet.

9
00:00:34,560 --> 00:00:41,070
So I'm going to style the UL and give it a color of purple and when I do that

10
00:00:44,580 --> 00:00:51,250
you'll see that when I refresh the allies actually become purple.

11
00:00:51,270 --> 00:00:52,570
So what happened there.

12
00:00:52,620 --> 00:00:57,990
You know I styled the area where they styled the UL and the lie was indirectly changed and it inherited

13
00:00:57,990 --> 00:01:01,730
that color from the parent element.

14
00:01:01,830 --> 00:01:04,350
So let me show you another example of that.

15
00:01:05,370 --> 00:01:07,410
Let's add in just a paragraph here

16
00:01:10,850 --> 00:01:15,890
it starts off black and I'm going to come and tout this you will purple for now.

17
00:01:15,900 --> 00:01:18,010
So everything is just normal black text.

18
00:01:18,010 --> 00:01:25,920
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

19
00:01:26,010 --> 00:01:28,980
red and I refresh this.

20
00:01:29,250 --> 00:01:31,370
You'll see that everything is red.

21
00:01:32,040 --> 00:01:38,850
So this is just demonstrating this concept of inheritance where if we set a property on a parent it

22
00:01:38,850 --> 00:01:40,720
can also affect a child element.

23
00:01:40,920 --> 00:01:46,310
So this is nice if we want it to make all paragraphs and allies all read.

24
00:01:46,350 --> 00:01:50,540
We don't have to sit like paragraphs and turn them read and then select allies and turn them red.

25
00:01:50,580 --> 00:01:52,690
We can just select the body.

26
00:01:53,490 --> 00:02:00,840
So the next thing that I want to show is what happens if I go in here and then I decide that a paragraph

27
00:02:01,320 --> 00:02:05,980
I actually want it to be green.

28
00:02:08,670 --> 00:02:12,630
If we refresh we'll see of course that the paragraph turned to green.

29
00:02:12,630 --> 00:02:22,350
Likewise if I want the ul to be green or let's do blue and I save and refresh the UL turns blue and

30
00:02:22,350 --> 00:02:24,830
so do the allies because they inherit from that.

31
00:02:25,170 --> 00:02:31,040
So what's happening here is actually demonstrating this idea of specificity and CSSA.

32
00:02:31,680 --> 00:02:36,530
So we have multiple styles that could be impacting this same ally.

33
00:02:36,690 --> 00:02:43,410
It could be red and it starts out as red and then returning it blue because all you are supposed to

34
00:02:43,410 --> 00:02:44,220
be blue.

35
00:02:44,700 --> 00:02:52,410
So if we go ahead and inspect one of these elements and I'm going to make this fullscreen and I'm going

36
00:02:52,410 --> 00:02:58,350
to increase this and increase the font size a little bit too you'll see that the color is set as blue

37
00:02:58,830 --> 00:03:08,190
coming from a UL and it tells us inherited from UL and if we keep scrolling you'll see inherited from

38
00:03:08,190 --> 00:03:09,180
body.

39
00:03:09,300 --> 00:03:15,630
The color is red but it's actually crossed out and so that means that it's not being applied at all

40
00:03:15,630 --> 00:03:15,720
.

41
00:03:15,720 --> 00:03:17,990
And instead this style is being applied.

42
00:03:18,150 --> 00:03:24,120
So this shows us this style is attempting to be applied or it is targeting this element that we have

43
00:03:24,120 --> 00:03:28,640
selected but it's crossed off which means it's not actually being applied.

44
00:03:29,850 --> 00:03:35,460
So the next topic which is very closely related to inheritance is called specificity.

45
00:03:36,030 --> 00:03:42,570
So specificity is this idea in the sense that we can have multiple styles targeting one element and

46
00:03:42,570 --> 00:03:44,060
that's happening right here.

47
00:03:44,100 --> 00:03:49,050
We have multiple styles targeting this one UL or this ally for instance.

48
00:03:49,320 --> 00:03:54,330
The lie is being turned red or it's being targeted by this line.

49
00:03:54,360 --> 00:03:56,600
Body turning everything in the body red.

50
00:03:56,700 --> 00:04:01,840
And it's also being targeted by this line which turns everything in the all Juelz blue.

51
00:04:02,130 --> 00:04:05,310
And so then the SS has to decide which one wins.

52
00:04:05,370 --> 00:04:10,770
And in this case whatever style is closest to this element.

53
00:04:10,770 --> 00:04:16,600
So whichever one is more specific and so what that means is the body is very general it's everything

54
00:04:16,610 --> 00:04:16,930
.

55
00:04:17,280 --> 00:04:20,560
And a UL is more specific that when it's going to win out.

56
00:04:20,910 --> 00:04:22,790
But this is just a simple case.

57
00:04:22,800 --> 00:04:27,140
So now let's up the ante a little bit and add in some more selectors.

58
00:04:27,330 --> 00:04:35,160
So let's go ahead and add in a direct ally selector and let's make an ally orange.

59
00:04:35,820 --> 00:04:39,100
And as you would expect it makes all allies orange.

60
00:04:39,180 --> 00:04:47,830
And if we open up the inspector we'll see it's being turned red by the body but that's crossed off.

61
00:04:48,180 --> 00:04:53,550
It's being turned blue by the UL selector and then it's being turned orange by the fly selector and

62
00:04:53,550 --> 00:04:55,050
that one wins out.

63
00:04:55,050 --> 00:04:59,200
So these are all simple cases where it's pretty clear which one wins.

64
00:04:59,400 --> 00:05:02,590
But now let's introduce something on top of this.

65
00:05:02,940 --> 00:05:10,680
Let's now say I want this to have a class called highlight

66
00:05:14,020 --> 00:05:24,460
and I'll give it to two of them and then I select this class highlight and I give a background color

67
00:05:24,610 --> 00:05:24,950
.

68
00:05:25,120 --> 00:05:26,550
Actually let's just stick with color.

69
00:05:26,860 --> 00:05:31,090
Just so it's all the same property color of yellow and I save.

70
00:05:31,090 --> 00:05:33,040
Which one do you think is going to win out now.

71
00:05:33,610 --> 00:05:40,780
Let's check and you can see that the highlight class wins and it's turned yellow because of that high

72
00:05:40,780 --> 00:05:41,910
like class.

73
00:05:42,370 --> 00:05:48,400
So this is showing us something where in L.A. We're directly targeting all allies and making them orange

74
00:05:48,670 --> 00:05:53,960
and then we're also directly targeting a few allies that have this class and making them yellow.

75
00:05:54,190 --> 00:05:56,960
And in this case this class wins out.

76
00:05:57,370 --> 00:06:01,420
So there are actually very specific rules for how this works and I'm going to show it to you in just

77
00:06:01,420 --> 00:06:02,100
a second.

78
00:06:02,140 --> 00:06:10,420
But before that I just want to add one more example in so let's say also give this element an I.D. and

79
00:06:10,420 --> 00:06:13,520
I'm going to call it special.

80
00:06:13,610 --> 00:06:22,320
I'm going to target that element special and I'm going to give it a color of pink and I refresh.

81
00:06:22,330 --> 00:06:24,760
You'll see that that element wins out.

82
00:06:24,850 --> 00:06:32,770
And one more time if we inspect you'll see that we have a style from the body that's not applied one

83
00:06:32,770 --> 00:06:38,570
from the well that's inherited but not applied one from the lie that it's not applied one from the class

84
00:06:38,570 --> 00:06:39,430
that is not applied.

85
00:06:39,520 --> 00:06:43,660
And then one from the ID special that is applied.

86
00:06:43,750 --> 00:06:46,790
So in this case the ID wins.

87
00:06:47,020 --> 00:06:50,490
So as I mentioned there are very specific rules as to how this works.

88
00:06:50,830 --> 00:06:52,690
And I've written them up down here.

89
00:06:52,840 --> 00:06:57,310
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

90
00:06:57,310 --> 00:07:02,320
recommend that you read and it talks about how specificity is calculated.

91
00:07:02,320 --> 00:07:08,440
So when she sees that there are three or four different colors that this one could be.

92
00:07:08,560 --> 00:07:10,540
How does it know which one to pick.

93
00:07:10,810 --> 00:07:16,870
And the way that it does it actually runs the calculation so it assigns a numeric value to each of those

94
00:07:16,870 --> 00:07:19,210
selectors.

95
00:07:19,420 --> 00:07:26,020
So it's going to assign a numeric value to this here and then to this one and then to this one and to

96
00:07:26,020 --> 00:07:27,180
this one.

97
00:07:27,220 --> 00:07:30,180
And as we know this one wins out.

98
00:07:30,250 --> 00:07:36,340
So the way that it's actually calculated we don't actually have to know the exact math but I will show

99
00:07:36,340 --> 00:07:37,640
it to you here.

100
00:07:37,720 --> 00:07:43,810
There is a calculator that we can actually type things into online that will tell us how specific something

101
00:07:43,810 --> 00:07:44,470
is.

102
00:07:44,800 --> 00:07:51,920
So if I just select all allies you'll see it has the specificity of one.

103
00:07:51,940 --> 00:07:59,560
Now let's try slutting that class highlight and that is 10 times as specific as the specificity of 10

104
00:07:59,570 --> 00:07:59,810
.

105
00:08:00,040 --> 00:08:04,380
So that's why a class 1 out over the lie.

106
00:08:04,390 --> 00:08:11,530
And that's why this element is actually yellow because that class highlight won out over the orange

107
00:08:11,530 --> 00:08:12,510
color.

108
00:08:13,180 --> 00:08:15,430
Now if we go and we add an I.D.

109
00:08:18,430 --> 00:08:24,660
or what we call a special you can see that is 100 times more specific than just the law tag.

110
00:08:24,790 --> 00:08:28,540
So that one wins out and that also beats the class.

111
00:08:28,540 --> 00:08:36,670
So the basic rule here is that element selectors tag names are not very specific class selectors are

112
00:08:36,670 --> 00:08:41,340
much more specific and then IDs are the most specific that you can get.

113
00:08:41,650 --> 00:08:44,920
And I'll also show you it's not limited just to one ID.

114
00:08:44,950 --> 00:08:48,330
So let's say we wanted to know what is more specific.

115
00:08:48,340 --> 00:08:53,320
I have a class and another class inside of it.

116
00:08:53,320 --> 00:08:59,170
So this is a descendent Selecta remember this is only 20 specificity.

117
00:08:59,530 --> 00:09:05,160
And if I just have a single I.D. That's 100 specificity.

118
00:09:05,170 --> 00:09:09,970
So again I don't want you to think that you need to be using the site all the time and calculating numbers

119
00:09:09,970 --> 00:09:10,120
.

120
00:09:10,180 --> 00:09:11,440
That's not important.

121
00:09:11,440 --> 00:09:16,360
All that you need to know is the order of magnitudes so I'll go to my notes here and have them written

122
00:09:16,360 --> 00:09:19,930
out type selectors are the least specific.

123
00:09:19,930 --> 00:09:28,390
So that's going to look like something like this or ally with an ATF inside of it or even the adjacent

124
00:09:28,390 --> 00:09:30,580
selector.

125
00:09:30,700 --> 00:09:34,190
So these selectors are not very specific.

126
00:09:34,330 --> 00:09:38,860
But even within this year this is going to be more specific than this.

127
00:09:38,890 --> 00:09:43,870
This is going to be more specific than this as well because there are two elements that we're referencing

128
00:09:43,890 --> 00:09:44,050
.

129
00:09:44,200 --> 00:09:47,360
So if we actually calculated it this is specificity of one.

130
00:09:47,530 --> 00:09:48,850
And this is two.

131
00:09:49,570 --> 00:09:52,780
Then the next level is a class.

132
00:09:53,890 --> 00:10:01,610
So this is going to be an order of magnitude 10 times bigger or more specific than any of these.

133
00:10:02,320 --> 00:10:04,380
And so is the attribute selector.

134
00:10:04,420 --> 00:10:16,600
So where we have things like input type equals text and so are these pseudo class selectors which are

135
00:10:16,600 --> 00:10:19,660
things like hover.

136
00:10:19,750 --> 00:10:26,890
So a tag on hover or input that's been checked and other things like that that have this colon there

137
00:10:26,900 --> 00:10:27,360
.

138
00:10:28,060 --> 00:10:31,890
And then the very most specific thing is the I.D. selector.

139
00:10:32,230 --> 00:10:37,840
And so that is going to be another order of magnitude greater or more specific than the selectors here

140
00:10:37,850 --> 00:10:38,260
.