1
00:00:01,190 --> 00:00:05,660
In this video we're going to go over a solution to the CSSA selectors problem set.

2
00:00:05,970 --> 00:00:08,790
And I'm just going to go over every problem from the top down.

3
00:00:09,060 --> 00:00:12,760
So feel free to fast forward if there's just one or two that you had trouble with.

4
00:00:13,260 --> 00:00:20,110
So we did the first one together in the initial video give the body element a background of this color

5
00:00:20,120 --> 00:00:20,400
.

6
00:00:20,820 --> 00:00:25,650
So we just say body background is this color save for us.

7
00:00:25,740 --> 00:00:32,440
Let's go ahead and load it up in the browser refresh and you can see we get a gray background.

8
00:00:32,760 --> 00:00:36,910
So the next one is make the H one element this color.

9
00:00:37,190 --> 00:00:41,640
So same thing except rather than background we just said colored.

10
00:00:42,210 --> 00:00:46,530
We save inheres or H-1 it turns purple.

11
00:00:46,710 --> 00:00:52,830
Remember if we had more than one H-1 on the page they would all be purple.

12
00:00:52,830 --> 00:00:56,190
So this next one is make all H-2 elements orange.

13
00:00:56,520 --> 00:00:58,820
So exact same selector as the above two.

14
00:00:59,190 --> 00:01:06,030
And then to make it orange I'm just going to use the built in orange color but you could use any other

15
00:01:06,030 --> 00:01:10,870
color system and you can see we get every age to those four of them.

16
00:01:11,100 --> 00:01:13,830
They turn orange.

17
00:01:14,040 --> 00:01:19,520
So next up we're going to shift this over to the side make all ally elements blue.

18
00:01:19,680 --> 00:01:21,840
Pick your own hexadecimal blue.

19
00:01:22,350 --> 00:01:29,280
So to do that we select all allies and then we give them a color and we're going to do a hexadecimal

20
00:01:29,280 --> 00:01:30,120
blue.

21
00:01:30,180 --> 00:01:33,540
So you could put anything here as long as it's more blue than anything else.

22
00:01:33,690 --> 00:01:37,560
So remember the first channel is red then the next two are green.

23
00:01:37,560 --> 00:01:43,870
So we'll do a little bit of green let's do and then a bunch of blue.

24
00:01:44,460 --> 00:01:50,880
Save that and let's take a look at the Allies and you can see we get blue lights.

25
00:01:51,630 --> 00:01:55,570
So now change the background on every paragraph to be yellow.

26
00:01:55,860 --> 00:02:00,310
It's just one more where we select every element of a type.

27
00:02:00,360 --> 00:02:10,570
So all paragraphs background yellow save and we get a bunch of yellow paragraphs.

28
00:02:10,740 --> 00:02:15,510
Next up select all inputs and give them a three pixel red border.

29
00:02:15,570 --> 00:02:20,050
So input border and there's a few ways of doing this we can do it all at once.

30
00:02:20,070 --> 00:02:22,230
Order three pixel solid red

31
00:02:25,470 --> 00:02:31,830
and you can see our two inputs have a prefix or solid red border or we could do this separately border

32
00:02:31,830 --> 00:02:33,300
color red

33
00:02:36,420 --> 00:02:45,890
border with is three pixels and finally border style is solid for pretty obvious reasons.

34
00:02:45,900 --> 00:02:47,710
It's a lot easier to do this.

35
00:02:47,940 --> 00:02:51,440
But occasionally you'll want to do this when you get to javascript.

36
00:02:51,570 --> 00:02:53,450
We'll want to just update one part.

37
00:02:53,640 --> 00:02:58,100
So when a user hovers over something you want to change it from a red border to a green border.

38
00:02:58,320 --> 00:03:03,080
Well we might just want to change the color and we can leave the with in the style how they are.

39
00:03:03,130 --> 00:03:05,580
So I'm going to leave it like this.

40
00:03:06,150 --> 00:03:08,270
Next we're now moving onto the class selector.

41
00:03:08,430 --> 00:03:10,690
So give everything with the class Hello.

42
00:03:10,740 --> 00:03:12,150
A white background.

43
00:03:12,270 --> 00:03:15,390
And if we look at the h t m l there's actually just one thing.

44
00:03:15,390 --> 00:03:18,580
This first paragraph inside this div with class.

45
00:03:18,630 --> 00:03:19,520
Hello.

46
00:03:19,950 --> 00:03:22,500
So we select that class dot.

47
00:03:22,830 --> 00:03:27,630
Hello background white.

48
00:03:29,520 --> 00:03:31,680
And you can see we get this paragraph here.

49
00:03:31,710 --> 00:03:34,080
It turns white.

50
00:03:34,440 --> 00:03:40,720
Next up give the element with ID special a two pixel solid blue border.

51
00:03:40,740 --> 00:03:42,920
Pick your own R.G. be blue.

52
00:03:43,290 --> 00:03:49,740
So same thing again this time instead of a dot we use the hash sign or the arc to Thorpe and then that

53
00:03:49,740 --> 00:03:54,630
name of the ID she can see again is right here Id especial.

54
00:03:55,110 --> 00:04:03,640
And then we want to give it a two pixel solid border so to pixel solid and then R.G. be blue.

55
00:04:05,210 --> 00:04:14,220
And so will have 0 red 100 green 200 blue and if we are fresh that you can see we get it's pretty slight

56
00:04:14,250 --> 00:04:19,310
but a 2 pixel blue border around this paragraph with the ID.

57
00:04:19,440 --> 00:04:27,090
Next up make all the paragraphs that are nested inside of divs 25 pixel font and the hint is use this

58
00:04:27,090 --> 00:04:31,020
property font Dasch size 25 pixels.

59
00:04:31,020 --> 00:04:36,270
So what we need to do here is rather than select all paragraphs we only want paragraphs that are inside

60
00:04:36,270 --> 00:04:42,200
of a div so you can see there are some like this one here that is not inside a div.

61
00:04:42,540 --> 00:04:46,590
We don't want those to be 25 pixels in font size.

62
00:04:46,800 --> 00:04:56,010
So we use this descendants selector where we say div and then inside of that div all paragraphs so paragraphs

63
00:04:56,190 --> 00:05:04,710
that live in any div doesn't matter which div just any paragraphs in any divs will select them and give

64
00:05:04,710 --> 00:05:17,520
them font size 25 pixels save that refresh and you can see that these all get bigger but these ones

65
00:05:17,520 --> 00:05:26,530
that say paragraph not inside a div don't get bigger because they're not instead of a div Next up make

66
00:05:26,530 --> 00:05:30,850
only inputs with type text have a gray background.

67
00:05:30,860 --> 00:05:34,790
So this is another type of selector and it's based off of an attribute.

68
00:05:35,300 --> 00:05:39,450
So the attribute you want to do is find where type is equal to text.

69
00:05:39,520 --> 00:05:44,900
So basically just this input right here type equals text.

70
00:05:45,510 --> 00:05:53,620
And so the way that we do that we're going to type input and then square braces and yep square braces

71
00:05:53,630 --> 00:05:53,650
.

72
00:05:53,690 --> 00:05:59,570
And then inside of there the attribute which is type and we're looking for where it's equal to text

73
00:06:00,130 --> 00:06:04,440
and then we're just going to say background gray.

74
00:06:05,200 --> 00:06:09,880
And then if we scroll down here and refresh keep your eye right here you can see we get a gray background

75
00:06:09,900 --> 00:06:10,420
.

76
00:06:10,940 --> 00:06:15,930
So again this one is useful if you want it to select all links that went to Google.

77
00:06:15,940 --> 00:06:21,480
We would select based off of H.F. or we could select off of any other attribute out there.

78
00:06:21,500 --> 00:06:26,680
So next up give both paragraphs inside the third div a pink background.

79
00:06:26,870 --> 00:06:28,180
So this one gets a little bit crazy.

80
00:06:28,190 --> 00:06:30,070
So let's take a look at the HMO.

81
00:06:30,320 --> 00:06:32,110
Here is our third div..

82
00:06:32,120 --> 00:06:34,000
The first one is here.

83
00:06:34,120 --> 00:06:40,210
The second one is here and the third one is here and there's two paragraphs and we want to select both

84
00:06:40,210 --> 00:06:42,920
of them and give them a pink background.

85
00:06:42,910 --> 00:06:50,160
So what we did before was select all paragraphs inside of all divs that won't work here.

86
00:06:50,320 --> 00:06:55,420
What we do what we do want to do is select all paragraphs inside of the third div on the page.

87
00:06:55,660 --> 00:07:01,000
And the way that we can specify the third div is to use end of type.

88
00:07:01,000 --> 00:07:06,990
So we'll say div and of type 3.

89
00:07:07,030 --> 00:07:12,950
So that's going to give us a third div and then instead of that all paragraphs and then we're just going

90
00:07:12,940 --> 00:07:21,110
to say background is pink and save refresh and let's double check.

91
00:07:21,190 --> 00:07:22,930
Here's our first div.

92
00:07:23,180 --> 00:07:25,330
Here is the second div.

93
00:07:25,660 --> 00:07:26,960
And here's the third div.

94
00:07:27,110 --> 00:07:31,440
Start to paragraph start with cardigan and I'm the second paragraph.

95
00:07:31,630 --> 00:07:33,090
There we go cardigan.

96
00:07:33,220 --> 00:07:35,850
I'm the second paragraph.

97
00:07:35,870 --> 00:07:42,260
Next up give this second paragraph inside the third div a five pixel border white border.

98
00:07:42,250 --> 00:07:47,140
So this one is very similar except we only want the second paragraph inside the third div.

99
00:07:47,140 --> 00:07:48,570
So just this one.

100
00:07:49,060 --> 00:07:57,910
So we do the same thing where we select the third div and of type 3 and then rather than all paragraphs

101
00:07:58,340 --> 00:08:02,110
we're then going to do paragraph and of type.

102
00:08:02,810 --> 00:08:06,470
And we want the second one so we can combine them.

103
00:08:06,470 --> 00:08:13,440
This is going to select the second paragraph instead of the third div and we want to give it a 5 pixel

104
00:08:13,450 --> 00:08:20,230
white border border 5 pixel solid white.

105
00:08:20,260 --> 00:08:20,820
There we go.

106
00:08:20,870 --> 00:08:24,610
Here's our five pixel solid white border on the second paragraph in the div.

107
00:08:24,740 --> 00:08:27,110
Not the first one.

108
00:08:27,130 --> 00:08:34,490
Next up make the E-M in the third div element white and 20 pixel font.

109
00:08:35,600 --> 00:08:40,450
So that's this E-M right here cronut skateboard.

110
00:08:40,450 --> 00:08:43,200
If you don't know Krown it is it's very delicious.

111
00:08:43,500 --> 00:08:44,690
Maybe overrated.

112
00:08:44,770 --> 00:08:48,740
Definitely overpriced pastry out of New York City.

113
00:08:48,790 --> 00:08:50,810
It has a doughnut and a croissant.

114
00:08:51,080 --> 00:08:56,420
So definitely at home instead of the hipster ipsum vocabulary here.

115
00:08:56,410 --> 00:09:03,750
And we're going to take that E-M and we're going to make it white and 20 pixel Swan.

116
00:09:04,070 --> 00:09:07,700
So just like before we had to select the third div

117
00:09:11,840 --> 00:09:12,200

118
00:09:15,830 --> 00:09:18,490
and then just the E-M inside.

119
00:09:18,790 --> 00:09:23,030
And this will select all IEMs and it just happens that there's only one.

120
00:09:23,140 --> 00:09:31,050
But if there were more than one we might want to say E-M first of type or E-M instead of a paragraph

121
00:09:31,510 --> 00:09:33,240
but I'll just leave it as this for now.

122
00:09:33,430 --> 00:09:43,580
And we want to give it white to color and 20 pixel font color white and font size 20 pixel.

123
00:09:44,090 --> 00:09:49,420
And just to remind you we are going to spend time talking about fonts and font size and a bunch of other

124
00:09:49,420 --> 00:09:52,110
things in future videos.

125
00:09:52,120 --> 00:09:53,310
There we go.

126
00:09:53,440 --> 00:09:55,720
It's white and the font size changes.

127
00:09:56,330 --> 00:09:59,910
So now we're onto some of the bonus exercises which are some of my favorite.

128
00:10:00,050 --> 00:10:04,520
There are some of the more obscure the more interesting ways of selecting things and manipulating them

129
00:10:04,510 --> 00:10:05,710
.

130
00:10:05,710 --> 00:10:06,800
So to start.

131
00:10:07,210 --> 00:10:13,750
Let's look at making all checked checkboxes have a left margin of 50 pixels and I gave it to you.

132
00:10:13,750 --> 00:10:16,980
You need to use margin left for 50 pixels.

133
00:10:17,530 --> 00:10:21,970
So there's a selector to select elements that are checked.

134
00:10:21,980 --> 00:10:23,590
And it just looks like this.

135
00:10:23,810 --> 00:10:26,740
It's a pseudo selector just like nth of type.

136
00:10:26,750 --> 00:10:29,910
So we need to say what we're looking for that's been checked.

137
00:10:29,950 --> 00:10:36,400
So I'm just going to say all inputs that have been checked because remember that checkboxes are input

138
00:10:36,400 --> 00:10:45,130
type equals checkbox there are other elements that can be checked though mainly the radio button.

139
00:10:45,130 --> 00:10:49,850
So this would also select any radio buttons that have been checked and that's fine for now.

140
00:10:50,080 --> 00:10:53,410
So it looks like this input colon checked.

141
00:10:53,510 --> 00:10:58,180
And what we want to do is use margin left fifty pixels.

142
00:10:58,390 --> 00:11:03,790
So this is a little preview of what we're coming up on in some of the future videos when we add this

143
00:11:03,800 --> 00:11:09,670
and it's going to add some space on the left side of the checkbox so you can see the ones that are checked

144
00:11:10,030 --> 00:11:11,160
moved over.

145
00:11:11,160 --> 00:11:17,400
Now if I check this one now this is checked and it moves over to the right 50 pixels.

146
00:11:17,440 --> 00:11:22,100
If I uncheck them and move back over to the left.

147
00:11:22,750 --> 00:11:24,200
So that's checked.

148
00:11:24,520 --> 00:11:25,390
The next one.

149
00:11:25,460 --> 00:11:26,620
This is probably my favorite.

150
00:11:26,710 --> 00:11:31,380
Make the label elements all uppercase without changing the HMO.

151
00:11:31,750 --> 00:11:36,820
So I mentioned you'll definitely want to look that one up and that's because we definitely haven't gone

152
00:11:36,820 --> 00:11:38,130
over this.

153
00:11:38,230 --> 00:11:45,400
So to start let's just select all label elements and then let's say that I don't know how to make them

154
00:11:45,400 --> 00:11:47,890
uppercase without changing the HMO.

155
00:11:48,130 --> 00:11:53,650
So let's pull up Google and do a search and this is something that I definitely had done before.

156
00:11:53,920 --> 00:12:04,060
So let's go up and do a search see assess upper case you can see the first thing that pops up is text

157
00:12:04,150 --> 00:12:10,820
transform and text transform it says it specifies how to capitalize in elements text.

158
00:12:11,080 --> 00:12:16,810
It can be used to make text appear in all upper case or all lowercase or with each word capitalized

159
00:12:16,820 --> 00:12:17,680
.

160
00:12:18,520 --> 00:12:23,210
So then we scroll down and take a look at the syntax and it looks like we have capitalize.

161
00:12:23,290 --> 00:12:26,580
Will capitalist's first letter upper case and lower case.

162
00:12:26,620 --> 00:12:29,730
So we want uppercase.

163
00:12:29,770 --> 00:12:33,360
So text transform uppercase.

164
00:12:33,550 --> 00:12:38,560
And what I just did there was not just to show you something it's actually something that I do all the

165
00:12:38,560 --> 00:12:47,320
time which is looking things up going to Google typing C Ss blah blah blah CSSA upper case C S S transparent

166
00:12:47,590 --> 00:12:48,730
whatever I'm looking to do.

167
00:12:48,850 --> 00:12:52,610
And I just look at the search results because there are so many properties to recall.

168
00:12:52,690 --> 00:12:54,300
You can not remember all of them.

169
00:12:54,610 --> 00:12:56,140
So this is one of the more obscure ones.

170
00:12:56,140 --> 00:12:57,240
Definitely.

171
00:12:57,550 --> 00:13:02,750
And if we refresh this is for labels which are down here.

172
00:13:02,860 --> 00:13:07,480
So let me just get rid of that just to show you our time.

173
00:13:07,510 --> 00:13:08,750
These are the labels.

174
00:13:09,070 --> 00:13:13,180
And then we add this in and refresh their upper cased.

175
00:13:14,200 --> 00:13:21,400
So next up we have make the first letter of the element with ID special green and 100 pixel font size

176
00:13:21,410 --> 00:13:21,790
.

177
00:13:22,240 --> 00:13:27,940
So to target the first letter that's another one that we might want to look up SEUS us first letter

178
00:13:28,390 --> 00:13:31,030
and see what we get.

179
00:13:31,090 --> 00:13:33,430
So it looks like there's another pseudo selector.

180
00:13:33,610 --> 00:13:39,550
The first letter C Ss element selects the first letter of the first line of a block.

181
00:13:39,610 --> 00:13:43,930
So if you take a look an example first letter.

182
00:13:44,200 --> 00:13:46,990
Let's go ahead and try that.

183
00:13:47,240 --> 00:13:53,420
We want to first select the ID special and then first the letter of that.

184
00:13:53,980 --> 00:14:04,020
And we want to make it green and 100 pixels in font size so color green and font size 100 pixels save

185
00:14:04,780 --> 00:14:06,560
and that element is right here.

186
00:14:06,580 --> 00:14:13,220
So keep an eye on the first letter we refresh and we get this giant green eye.

187
00:14:14,110 --> 00:14:19,430
Next one make the H-1 elements color changed to blue when hovered over.

188
00:14:19,690 --> 00:14:23,370
So this one is actually pretty common to have some sort of effect.

189
00:14:23,380 --> 00:14:28,840
When you hover over something usually it's pretty subtle maybe a button and you hover over it and there's

190
00:14:28,840 --> 00:14:34,120
a small shadow that appears that the color shifts very slightly to look like you know some sort of 3-D

191
00:14:34,120 --> 00:14:40,000
perspective for something to give you just a little bit of interactivity without being distracted distracting

192
00:14:40,020 --> 00:14:40,270
.

193
00:14:40,510 --> 00:14:44,960
So we're going to select the H-1 And this actually is all each one.

194
00:14:44,980 --> 00:14:51,760
But in this case it's only one and the pseudo selector is hover and whatever we put in here is only

195
00:14:51,760 --> 00:14:54,780
applied when a user hovers over the element.

196
00:14:55,210 --> 00:14:57,680
So color blue we save.

197
00:14:58,030 --> 00:14:59,820
Here's our H-1.

198
00:15:00,250 --> 00:15:06,610
And if I hover turns blue when I stop hovering it goes back to whatever it had before.

199
00:15:08,380 --> 00:15:15,280
So finally make the elements that have been visited gray and as he can see the two elements these two

200
00:15:15,280 --> 00:15:20,380
links actually both links to Facebook which are links that I've visited before.

201
00:15:20,380 --> 00:15:25,530
Which is why they're purple Chrome by default will make all visited thinks purple.

202
00:15:25,660 --> 00:15:29,320
So let's put a link that I definitely haven't been to before and it just going to make something up

203
00:15:29,320 --> 00:15:32,110
to start and I'll show you refresh the page.

204
00:15:32,110 --> 00:15:33,190
It's now blue.

205
00:15:33,250 --> 00:15:34,900
Because I haven't been there.

206
00:15:35,080 --> 00:15:37,440
So let's leave it that way for now I'm not going to click it.

207
00:15:38,020 --> 00:15:41,760
And we want the visited ones to be purple rather than.

208
00:15:42,000 --> 00:15:45,490
I'm sorry we want the visited once to be grey rather than purple.

209
00:15:45,760 --> 00:15:56,600
So we select a tags the pseudo selectors called visited and then we're going to make it gray save.

210
00:15:56,840 --> 00:15:57,920
And if we refresh.

211
00:15:58,030 --> 00:15:59,540
Keep your eye on this one here.

212
00:15:59,590 --> 00:16:00,970
I'll make the font a little bigger.

213
00:16:00,970 --> 00:16:04,430
It's currently purple because I've been there before I refresh.

214
00:16:04,540 --> 00:16:05,500
Now it's great.

215
00:16:05,800 --> 00:16:07,990
OK so hope you enjoyed that exercise.

216
00:16:07,990 --> 00:16:09,340
There's a lot to unpack there.

217
00:16:09,340 --> 00:16:10,990
A lot of different selectors.

218
00:16:11,290 --> 00:16:17,140
And one thing I'll add is that for every solution that I have or almost every single one there are at

219
00:16:17,140 --> 00:16:21,460
least one or two more ways of achieving the exact same outcome.

220
00:16:21,490 --> 00:16:25,360
So if you had something that differed from me but it still worked that's great.

221
00:16:25,360 --> 00:16:27,060
Feel free to add in the comments.

222
00:16:27,160 --> 00:16:28,490
Share it with other people.

223
00:16:28,510 --> 00:16:29,780
It's totally valid.

224
00:16:29,800 --> 00:16:32,680
This is just the way that I would have done it.

225
00:16:32,680 --> 00:16:33,890
One other thing.

226
00:16:34,240 --> 00:16:37,060
Obviously the site is not particularly attractive.

227
00:16:37,210 --> 00:16:38,620
This is not a real site.

228
00:16:38,650 --> 00:16:43,110
We will be working on a real project very very soon in the next exercise video.

229
00:16:43,210 --> 00:16:47,040
We're actually going to make a little blog site that is a little bit better designed.

230
00:16:47,140 --> 00:16:49,020
It looks much nicer than this.

231
00:16:49,030 --> 00:16:51,010
This is more just a practice exercise.