1
00:00:00,900 --> 00:00:02,650
And welcome back.

2
00:00:02,670 --> 00:00:06,070
In this video, we're going to talk all about selectors.

3
00:00:06,120 --> 00:00:07,910
Let's go back to our home base here.

4
00:00:08,130 --> 00:00:10,550
We can look at our styles.

5
00:00:10,830 --> 00:00:15,030
So far, we've only been selecting elements.

6
00:00:16,160 --> 00:00:22,220
But most likely, we need something more than this, so let's go back to our example and look at what

7
00:00:22,220 --> 00:00:24,710
sort of selectors we can have.

8
00:00:25,040 --> 00:00:32,000
Let's say, for example, that we want the style that we have for the big home header to also apply

9
00:00:32,000 --> 00:00:33,770
to our PAETEC.

10
00:00:34,490 --> 00:00:35,550
How can we do that?

11
00:00:35,600 --> 00:00:38,900
Well, we can do something like this.

12
00:00:40,510 --> 00:00:42,190
I save refresh.

13
00:00:43,620 --> 00:00:44,140
Awesome.

14
00:00:44,370 --> 00:00:50,850
So that's a way of doing a selector and there's actually a whole bunch of things that we can do with

15
00:00:50,860 --> 00:00:51,420
selectors.

16
00:00:51,420 --> 00:00:55,920
And I created for you a nice little cheat sheet here that I'll attach after this lesson.

17
00:00:56,370 --> 00:01:00,790
And it references to really good resources that I recommend.

18
00:01:01,560 --> 00:01:04,950
One is the CSIS tricks that I've already mentioned.

19
00:01:04,950 --> 00:01:12,350
And you can see over here all the selectors that they have there, not as many as they had with properties.

20
00:01:12,360 --> 00:01:15,870
And it's actually not as overwhelming as you think.

21
00:01:16,410 --> 00:01:20,820
Probably about 30 percent of these are the ones that are used most of the time.

22
00:01:21,030 --> 00:01:27,920
And we also have our good friend, three schools that lists a bunch of the selectors here.

23
00:01:28,620 --> 00:01:33,420
So let's go over a few things and understand the main selectors that we have.

24
00:01:33,450 --> 00:01:36,120
So I've list them off for you over here.

25
00:01:36,390 --> 00:01:39,660
But I want to point your attention to this line.

26
00:01:39,690 --> 00:01:43,650
Cascading style sheets at the most basic level, it indicates.

27
00:01:45,820 --> 00:01:51,490
There you go, typo, it indicates that the order of CSFs rules matter, and that's something that we've

28
00:01:51,490 --> 00:01:52,590
already discussed before.

29
00:01:52,600 --> 00:01:54,730
You remember the P tags.

30
00:01:55,030 --> 00:02:02,350
So the order matters because we know that the council will read the last line and make sure that that

31
00:02:02,350 --> 00:02:03,510
color is green.

32
00:02:04,550 --> 00:02:10,010
So that's the most basic level, but there's a few other things that we can do.

33
00:02:10,040 --> 00:02:11,360
So let's look at the selectors.

34
00:02:11,510 --> 00:02:14,060
The first one is class, the class.

35
00:02:15,400 --> 00:02:20,320
We'll do something like this, so let's say we want to add a few more attacks here.

36
00:02:22,190 --> 00:02:23,450
And refresh.

37
00:02:24,110 --> 00:02:25,200
OK, perfect.

38
00:02:25,490 --> 00:02:32,510
We love the way everything looks, but ideally for the paragraph's we want the border to be a slightly

39
00:02:32,510 --> 00:02:33,130
different color.

40
00:02:33,920 --> 00:02:38,690
So what we can do is we can add something called class.

41
00:02:40,070 --> 00:02:45,020
So the class property, we can give it any value we want, whatever we want to call it, so let's call

42
00:02:45,020 --> 00:02:46,450
it web text.

43
00:02:46,550 --> 00:02:48,320
Now we can copy and paste.

44
00:02:49,670 --> 00:02:50,780
This class attribute.

45
00:02:52,860 --> 00:02:53,910
To all the Beatles.

46
00:02:55,570 --> 00:03:00,570
And if I go back to my style, let's make this put it up a bit.

47
00:03:02,110 --> 00:03:09,880
I can now add period subtext and then from here you can see that it's highlighted green and we want

48
00:03:09,880 --> 00:03:15,910
the border to be five pixels that green.

49
00:03:16,850 --> 00:03:26,930
Save and refresh and look at that, so class is a good way to select a group of elements and make sure

50
00:03:26,930 --> 00:03:33,140
that they all have the same styles and we can add multiple ones so this one can be active.

51
00:03:33,650 --> 00:03:37,460
And this adds a second class, which we can say.

52
00:03:38,420 --> 00:03:39,260
Has.

53
00:03:41,030 --> 00:03:43,790
The text color red.

54
00:03:44,360 --> 00:03:47,960
So if we save that, save this as well and refresh.

55
00:03:48,950 --> 00:03:51,920
You see over here that now this is red.

56
00:03:53,340 --> 00:03:55,050
So class is very, very useful.

57
00:03:55,260 --> 00:03:56,370
Let's look at the next one.

58
00:03:58,400 --> 00:03:59,910
Drag this over here, OK?

59
00:04:00,320 --> 00:04:01,850
The next one is IDX.

60
00:04:02,940 --> 00:04:09,570
I.D. is similar to class, except for you can use the same ID only once.

61
00:04:09,690 --> 00:04:12,810
So let's say that we want to group these tags.

62
00:04:14,820 --> 00:04:20,850
By wrapping them in a diff and you might remember this from the section where we talked about this tag

63
00:04:21,090 --> 00:04:27,030
that is very, very useful for success for occasions like this, where we want to wrap something so

64
00:04:27,030 --> 00:04:30,360
I can do ID equals div one.

65
00:04:30,360 --> 00:04:33,690
And if I save this, I can now go back here.

66
00:04:34,020 --> 00:04:40,560
And for an ID you want to do a hash, sign the IV one and let's do background.

67
00:04:42,470 --> 00:04:42,860
Blue.

68
00:04:43,740 --> 00:04:45,000
Save and fresh.

69
00:04:46,190 --> 00:04:48,770
All right, that looks absolutely hideous.

70
00:04:48,950 --> 00:04:53,570
You know what, I think this will look really, really good if it was if it had a bit of opacity.

71
00:04:53,900 --> 00:05:02,600
So, again, we remember back and if we want to blue, if you remember, is red, green and blue.

72
00:05:02,690 --> 00:05:03,830
So to 55.

73
00:05:04,070 --> 00:05:06,560
And then we'll add capacity of, let's say, zero point two.

74
00:05:07,010 --> 00:05:09,350
We save that refresh.

75
00:05:09,740 --> 00:05:10,120
All right.

76
00:05:10,130 --> 00:05:11,510
That looks a lot better.

77
00:05:11,840 --> 00:05:19,370
But now let's say we copy this and we want to add a second section now.

78
00:05:19,370 --> 00:05:23,030
We would have to call this div two again.

79
00:05:23,030 --> 00:05:27,560
We want to make sure that the IDs are different, otherwise we break the rules.

80
00:05:27,620 --> 00:05:30,830
Now, if I save this, we'll have something new.

81
00:05:30,830 --> 00:05:34,130
But no, in this one, we want to add a.

82
00:05:35,400 --> 00:05:37,350
Different style for div two.

83
00:05:37,380 --> 00:05:46,950
So, again, the selector of Div two will have, let's say this one instead of blue, has the background

84
00:05:46,950 --> 00:05:51,690
red with opacity of point to let's refresh and look at that.

85
00:05:52,260 --> 00:05:54,270
Alex looks a lot better than he used to.

86
00:05:54,510 --> 00:05:57,210
OK, let's go back to a couple of other ones.

87
00:05:57,220 --> 00:05:58,980
So this is a star.

88
00:05:59,820 --> 00:06:06,070
So the star, it's not used very often, but it symbolizes all elements.

89
00:06:06,300 --> 00:06:12,360
So if I do and usually you'll see stars at the top, but if I do something like this, I can say that

90
00:06:12,390 --> 00:06:18,420
we wanted to align everything and say text a line and we want to do right.

91
00:06:19,080 --> 00:06:23,370
If I say that and refresh now we see that this move to the right.

92
00:06:24,300 --> 00:06:26,430
But this didn't.

93
00:06:27,600 --> 00:06:33,870
And the reason is because, again, something called specificity, we're saying that, yep, I want

94
00:06:33,870 --> 00:06:35,220
everything to be right.

95
00:06:35,340 --> 00:06:41,420
But then as we go down the CSIS, you'll see that we are saying a shoe and pee.

96
00:06:41,460 --> 00:06:43,010
We want Texas line to be center.

97
00:06:43,170 --> 00:06:47,580
So these elements, instead of coming to the right, get to the center.

98
00:06:47,850 --> 00:06:49,470
So just to prove to you that.

99
00:06:49,470 --> 00:06:50,160
That's correct.

100
00:06:50,160 --> 00:06:53,160
If I comment this out, I save and refresh.

101
00:06:53,610 --> 00:06:56,380
You see, everything moves to the right.

102
00:06:56,450 --> 00:06:58,260
OK, and let's refresh.

103
00:06:58,260 --> 00:06:58,830
Perfect.

104
00:06:59,460 --> 00:07:00,930
The next one is the element.

105
00:07:00,930 --> 00:07:02,790
And this is something that we've already seen.

106
00:07:02,940 --> 00:07:07,950
You can see over here, we're selecting the element and then we're putting the property and values.

107
00:07:08,940 --> 00:07:15,570
The next one is the element, comma element, and that is just like we've done here before, we want

108
00:07:15,570 --> 00:07:19,320
both H2 and P to have these properties.

109
00:07:19,620 --> 00:07:25,380
The next one, and this is a little bit tricky, is element space element.

110
00:07:25,830 --> 00:07:31,170
And this is a little bit different than the top one because elements base element.

111
00:07:32,590 --> 00:07:33,720
What it does.

112
00:07:33,760 --> 00:07:36,370
I'll show you over here, I save this and I refresh.

113
00:07:37,450 --> 00:07:46,060
And what just happened here, you'll see that now the text, the line of center does not apply to these

114
00:07:46,060 --> 00:07:47,020
paragraphs anymore.

115
00:07:47,830 --> 00:07:56,110
And that's because this syntax of writing a selector means I want you to select all pieces that are

116
00:07:56,110 --> 00:07:57,340
inside H2.

117
00:07:57,550 --> 00:08:04,750
So now even the H2 is installed anymore because this says we only want the piece that are inside H2

118
00:08:04,990 --> 00:08:09,610
and you'll see that we have nothing inside to other than the text.

119
00:08:09,860 --> 00:08:11,440
So if I do something like this.

120
00:08:11,680 --> 00:08:14,560
Home, home, home.

121
00:08:14,590 --> 00:08:15,820
No, I like that.

122
00:08:15,880 --> 00:08:16,230
OK.

123
00:08:17,240 --> 00:08:24,050
Perfect, I save that and I refresh, you'll see that home gnome is added.

124
00:08:25,240 --> 00:08:32,130
With these stats, let's look at the next one, the next one is elements greater than element.

125
00:08:32,170 --> 00:08:34,510
So this one is a little tricky.

126
00:08:35,140 --> 00:08:38,950
So if I go like this and I refresh, nothing's changed.

127
00:08:38,950 --> 00:08:48,010
But this says that I want you to select all P's, all paragraphs that have parent of two.

128
00:08:49,120 --> 00:08:53,440
So to show you exactly what that means, let's add this on our new line so you can see better.

129
00:08:55,050 --> 00:09:01,650
If now within this PE, if we do something like this where we've wrapped this in a div.

130
00:09:03,040 --> 00:09:06,610
Like so and I refresh this, the style.

131
00:09:07,620 --> 00:09:16,970
Didn't get applied because it only wants peace, so paragraphs that are parents of two and this piece

132
00:09:17,000 --> 00:09:22,520
of his parent or her parent is the div Mr. and Mrs. Divx.

133
00:09:24,470 --> 00:09:31,430
If we put this back to the way it was and refresh, you'll see that this time it works because it's

134
00:09:31,430 --> 00:09:35,300
saying all pipes inside of you, which is the case.

135
00:09:35,960 --> 00:09:37,320
Hopefully you're still with me.

136
00:09:37,340 --> 00:09:39,780
This is as hard as selectors get.

137
00:09:40,040 --> 00:09:46,130
So once you know these ones, honestly, you've covered 90 percent and nothing else will scare you.

138
00:09:47,300 --> 00:09:50,930
Let's look at one more element plus element.

139
00:09:51,170 --> 00:10:00,070
So this one, if I go element plus element and refresh what just happened, this says select and implement.

140
00:10:00,080 --> 00:10:02,930
That is exactly after an H2 element.

141
00:10:03,410 --> 00:10:04,370
So what does that mean?

142
00:10:04,640 --> 00:10:08,750
Well, we need to make it so that the element.

143
00:10:10,040 --> 00:10:10,790
Is.

144
00:10:12,730 --> 00:10:13,800
Right after the two.

145
00:10:15,840 --> 00:10:22,980
So if I go like this safe and refreshed, you'll see that now we have our styles applied.

146
00:10:23,520 --> 00:10:24,690
Let's look at a few more.

147
00:10:24,690 --> 00:10:28,050
And like I said, these swans are probably the hardest.

148
00:10:28,500 --> 00:10:30,040
These last ones are kind of fun.

149
00:10:30,560 --> 00:10:33,580
OK, so we have a hover, so hover.

150
00:10:34,470 --> 00:10:39,600
What that means is if I go over here and I put hover at the end.

151
00:10:40,870 --> 00:10:46,390
This means that when I refresh, nothing happens, but when I hover my mouse, look at that.

152
00:10:47,340 --> 00:10:51,600
It changes the style to what we just wrote down over here.

153
00:10:51,900 --> 00:10:54,200
This one's a pretty cool one, especially for buttons.

154
00:10:54,870 --> 00:11:00,330
The next one, if we look over here, his last child and first child, and you might guess what that

155
00:11:00,330 --> 00:11:00,940
means.

156
00:11:00,960 --> 00:11:05,790
So a good way to demonstrate this is we want to use Web text.

157
00:11:05,790 --> 00:11:13,920
So Web text, as if you remember, is all these little lower Ambersons I can say in here, last child

158
00:11:14,190 --> 00:11:14,790
refresh.

159
00:11:15,740 --> 00:11:24,140
And only the last child of each Web text and you'll see here that there's two of them because it is

160
00:11:24,140 --> 00:11:27,530
selecting the last child, this one and this one.

161
00:11:29,220 --> 00:11:33,210
And then there's also a first child, which, as you can imagine if I refresh.

162
00:11:34,150 --> 00:11:35,280
Selects the first items.

163
00:11:37,090 --> 00:11:42,610
And then finally, I want to show you one last thing that I don't recommend, but you might see it in

164
00:11:42,610 --> 00:11:46,260
some code bases, so I don't want you to be surprised when you come across it.

165
00:11:47,220 --> 00:11:55,050
And that is this so I can add something like exclamation mark important here, and you'll see again,

166
00:11:55,050 --> 00:11:56,100
we get that nice highlighting.

167
00:11:56,980 --> 00:11:59,280
An important means, let's see what happens here.

168
00:12:00,240 --> 00:12:07,620
I refresh and everything just turned pink, even though this pea over here says, I want the color green

169
00:12:07,890 --> 00:12:14,280
important overrides any of the cascading saltshaker rules and says, hey, I don't care what anybody

170
00:12:14,280 --> 00:12:14,940
else says.

171
00:12:15,150 --> 00:12:16,380
The P is pink.

172
00:12:16,650 --> 00:12:22,390
And you can see here why I don't recommend using this, because although you know for sure that the

173
00:12:22,390 --> 00:12:28,140
P tags will be pink if somebody else comes and starts working on your style sheet.

174
00:12:28,290 --> 00:12:34,230
And maybe this is hundreds of lines and they don't know that the important tag is there, they can be

175
00:12:34,230 --> 00:12:36,780
confused as to, hey, how come nothing's turning green?

176
00:12:36,780 --> 00:12:40,430
I can play all around with the color here and nothing's happening.

177
00:12:40,980 --> 00:12:44,340
And again, it breaks the rules of cascading stylesheets.

178
00:12:44,580 --> 00:12:46,170
So you don't really want to use it.

179
00:12:46,350 --> 00:12:49,490
But again, if you see it out in the wild, you won't be surprised this way.

180
00:12:49,740 --> 00:12:55,020
The last thing I want to leave you with is the idea of specificity.

181
00:12:55,080 --> 00:13:00,990
If this is your first time running into it, it might get a little confusing and you do need a bit of

182
00:13:00,990 --> 00:13:02,070
time to get used to it.

183
00:13:02,310 --> 00:13:08,640
But trust me, you'll get there is just one of these things that everybody goes through and eventually

184
00:13:08,790 --> 00:13:13,090
you'll have an aha moment when selectors win out in the cascade.

185
00:13:13,230 --> 00:13:14,810
It depends on three things.

186
00:13:15,630 --> 00:13:18,390
So the first thing is specificity.

187
00:13:18,390 --> 00:13:21,960
And I have a resource here that really explains it.

188
00:13:21,960 --> 00:13:28,170
Well, a simple way to think about this is how specific is your selector?

189
00:13:28,410 --> 00:13:33,140
So this has the specificity score of here.

190
00:13:33,690 --> 00:13:40,980
This has a little bit higher because it's more detailed, it's more nested and this one is higher.

191
00:13:41,370 --> 00:13:43,320
This one is even higher.

192
00:13:43,770 --> 00:13:46,830
And you can see that it keeps going higher and higher.

193
00:13:47,340 --> 00:13:54,120
So the more specific something is, the more likely it will win out and make sure that that is the style.

194
00:13:54,420 --> 00:13:58,980
And there's actually a really fun specificity calculator.

195
00:13:58,980 --> 00:14:00,210
It's really hard to say that word.

196
00:14:01,070 --> 00:14:02,900
So if you click over here.

197
00:14:04,830 --> 00:14:12,570
You can type in whatever you want to, let's say a, for example, is just one point, but if I do lie

198
00:14:12,750 --> 00:14:17,150
that's too and if I do, I lie, that's even higher.

199
00:14:17,160 --> 00:14:19,470
And if I do a lot even higher.

200
00:14:19,470 --> 00:14:23,160
But then I add an idea of food.

201
00:14:23,160 --> 00:14:25,110
I can see that IDs are even higher.

202
00:14:25,380 --> 00:14:33,330
And then if I add another class list to blue, you'll see that the specificity increases and you'll

203
00:14:33,330 --> 00:14:36,510
see over here that inline styles is actually the highest.

204
00:14:36,870 --> 00:14:46,470
So if you remember, that is putting a style directly into a section that will always win out over others.

205
00:14:46,470 --> 00:14:47,910
So you can play around with this.

206
00:14:47,910 --> 00:14:52,950
And I will link to some of the resources that I have in the next section.

207
00:14:53,760 --> 00:14:57,930
But again, this is something that will be very specific.

208
00:14:57,930 --> 00:15:01,680
Once you get to a certain problem, you can figure it out, but I hope that makes sense.

209
00:15:02,400 --> 00:15:04,650
Let's go back over here to the last two things.

210
00:15:04,830 --> 00:15:12,090
So the other thing was the importance importance is, as I mentioned, this exclamation mark important.

211
00:15:12,360 --> 00:15:16,550
So that always depends on what kind of styles the cascade gets.

212
00:15:16,860 --> 00:15:20,310
And then finally, it is the source order.

213
00:15:21,060 --> 00:15:24,090
And that is let's go back to our index file.

214
00:15:24,960 --> 00:15:30,540
If we had another stylesheet here, let's say we're importing another stylesheet.

215
00:15:30,810 --> 00:15:35,580
And if you remember, we have style to here that makes the H2 color blue.

216
00:15:36,150 --> 00:15:39,090
If I put this in save.

217
00:15:39,090 --> 00:15:41,580
And let's go back to our website and refresh.

218
00:15:43,130 --> 00:15:50,960
This turns blue because our browser reads this stylesheet and then reads this one, and because this

219
00:15:50,960 --> 00:15:54,090
one happens after this, the later star gets added.

220
00:15:54,140 --> 00:15:55,760
So if I switch this over here.

221
00:15:56,830 --> 00:16:06,970
And I save refresh and let's make sure that the H2 has its own style, so less due to its color red

222
00:16:07,540 --> 00:16:07,950
fresh.

223
00:16:08,710 --> 00:16:11,250
You'll see that this style wins out.

224
00:16:11,810 --> 00:16:15,520
OK, I'm going to leave this out for you in the next section.

225
00:16:15,520 --> 00:16:22,440
You can play around with CSFs and some of the selectors, but this is the hardest it's going to get.

226
00:16:22,450 --> 00:16:25,570
And once you remember these rules, you're all set.

227
00:16:26,200 --> 00:16:27,070
I'll see you in the next one.

228
00:16:27,580 --> 00:16:27,880
Bye bye.