1
00:00:00,630 --> 00:00:01,200
‫Hey, dad.

2
00:00:01,320 --> 00:00:02,070
‫Welcome back.

3
00:00:02,340 --> 00:00:07,050
‫Now in this lecture, let us discuss about solar elements and solar glass.

4
00:00:07,680 --> 00:00:10,940
‫So what are they and why that important now?

5
00:00:10,960 --> 00:00:18,570
‫First thing is, I just quickly designed this list, as well as this quick one so we can discuss the

6
00:00:18,570 --> 00:00:19,230
‫whole topic.

7
00:00:19,800 --> 00:00:24,570
‫Symbolist I have these five countries named as well as I have this quick one.

8
00:00:24,960 --> 00:00:26,760
‫They just jump onto the quote part.

9
00:00:27,210 --> 00:00:34,560
‫We have three dogs as well as this on our list inside our new and had I have a quick farm with import

10
00:00:34,560 --> 00:00:41,310
‫label import label as well as button inside or do not set a no styling is applied.

11
00:00:41,610 --> 00:00:45,600
‫So just border walks defined as by default, 16 pixel.

12
00:00:46,550 --> 00:00:47,960
‫OK, I hope this looks fine.

13
00:00:48,500 --> 00:00:51,050
‫Now here we utilize them as a selector.

14
00:00:51,530 --> 00:00:52,760
‫What I mean by this?

15
00:00:53,430 --> 00:00:58,760
‫So there are several times when a button or any other property are in special state.

16
00:00:59,060 --> 00:01:03,240
‫What example if I click here, I want this to be blue.

17
00:01:03,260 --> 00:01:05,660
‫I want this to change and do something.

18
00:01:05,930 --> 00:01:13,460
‫I cannot do that because by default, if I select input this input, this will change the current state.

19
00:01:13,470 --> 00:01:16,460
‫But I want to change this date when it's clicked.

20
00:01:17,030 --> 00:01:22,430
‫Or maybe I just want to change this date when I want or what that means when I am on the top, but I

21
00:01:22,430 --> 00:01:23,270
‫haven't played it.

22
00:01:23,320 --> 00:01:30,980
‫Remember when I am on the top, that's where I need to change the button style or any type of button

23
00:01:30,980 --> 00:01:31,430
‫design.

24
00:01:31,940 --> 00:01:33,800
‫This happens with multiple website.

25
00:01:33,800 --> 00:01:38,600
‫When you hold over them, they increase their size, or maybe they change their color, or maybe the

26
00:01:38,600 --> 00:01:40,070
‫font size increases.

27
00:01:40,460 --> 00:01:42,440
‫So that's where our coming together.

28
00:01:42,590 --> 00:01:46,640
‫Or maybe I want when I'm unfocused, I want the color to be changed.

29
00:01:47,300 --> 00:01:53,420
‫So all these styling that happen after certain changes are known as Sulu classes.

30
00:01:54,610 --> 00:01:54,920
‫OK.

31
00:01:55,000 --> 00:01:59,770
‫This is great, so choose your glasses means I want to select them in a special state.

32
00:02:00,100 --> 00:02:01,390
‫That's the basic meaning.

33
00:02:01,870 --> 00:02:03,280
‫Now what the Sulu element?

34
00:02:05,340 --> 00:02:09,990
‫So maybe I have multiple elements, and I want to select specifically one.

35
00:02:10,260 --> 00:02:15,480
‫Suppose I if I say, OK, give me all the elements from this, you will say I'm going to get all the

36
00:02:15,480 --> 00:02:15,900
‫elements.

37
00:02:16,380 --> 00:02:23,130
‫Now I can directly say, OK, just ended the first one, or maybe just select the first one and apply

38
00:02:23,130 --> 00:02:27,420
‫some style or maybe selected part, agile or fourth child.

39
00:02:27,960 --> 00:02:34,560
‫Whenever we are selecting these elements only with some specification, maybe force child only or third

40
00:02:34,560 --> 00:02:36,720
‫child only authenticated only.

41
00:02:37,080 --> 00:02:38,860
‫This is our last solo element.

42
00:02:38,880 --> 00:02:41,520
‫That means we are just selecting an element.

43
00:02:41,910 --> 00:02:45,690
‫But when to look as appears, we are selecting US patients deep.

44
00:02:47,020 --> 00:02:52,210
‫I hope you got the basic idea, but even if you are not understanding them, we will understand them

45
00:02:52,210 --> 00:02:53,100
‫through example.

46
00:02:55,220 --> 00:03:01,160
‫One common example will be double colon and single colon that will help you remember them.

47
00:03:01,470 --> 00:03:03,440
‫Let's understand what is happening here.

48
00:03:03,860 --> 00:03:08,090
‫So first, I'm going to apply the changes related to smaller classes.

49
00:03:08,450 --> 00:03:12,260
‫Suppose I want to hover over this button and change the color.

50
00:03:13,200 --> 00:03:19,020
‫So what I'm going to do is I'm going to select the button and I'm then I'm going to use these cologne

51
00:03:19,620 --> 00:03:21,600
‫and how you will see multiple option.

52
00:03:21,960 --> 00:03:28,710
‫The double colon are pseudo classes and single Cologne will be pseudo element.

53
00:03:28,920 --> 00:03:30,500
‫You don't need to remember this.

54
00:03:30,510 --> 00:03:36,840
‫I am again informing you you are not going to really use these words, pseudo classes or pseudo element.

55
00:03:37,080 --> 00:03:40,200
‫You are directly going to say, OK, Howard, that's it.

56
00:03:40,350 --> 00:03:44,220
‫You doesn't get if this is all elemental or class, what property is this?

57
00:03:44,400 --> 00:03:45,590
‫I'm just giving you names.

58
00:03:45,590 --> 00:03:51,570
‫So even maybe in future, you want to read them, search them, or maybe by Johnson and W. M. This.

59
00:03:52,560 --> 00:03:58,290
‫You can directly remember that, okay, what is all about whenever we just jump on to an element and

60
00:03:58,290 --> 00:04:00,750
‫we hover over this tax, our property?

61
00:04:01,590 --> 00:04:03,960
‫So here maybe I can change font color.

62
00:04:04,140 --> 00:04:06,390
‫And let me try to use something.

63
00:04:06,780 --> 00:04:08,850
‫Maybe this one for now soon.

64
00:04:09,330 --> 00:04:10,140
‫Get back here.

65
00:04:11,040 --> 00:04:12,480
‫You can see it's changing.

66
00:04:13,410 --> 00:04:14,820
‫This was just a demo example.

67
00:04:14,820 --> 00:04:16,380
‫We can do something they don't think.

68
00:04:18,680 --> 00:04:23,630
‫So let me try to use color as white and then maybe background color.

69
00:04:23,960 --> 00:04:25,910
‫Let me try to use something as dark.

70
00:04:26,950 --> 00:04:34,810
‫Maybe that's one, then maybe we can add border radius and maybe add zero point five for that will be

71
00:04:34,810 --> 00:04:35,980
‫a pixel approx.

72
00:04:36,310 --> 00:04:38,500
‫And then we can add some padding and margin.

73
00:04:38,520 --> 00:04:43,240
‫So if I get back here, nothing is happening, but I have my power over this.

74
00:04:43,250 --> 00:04:44,590
‫You can see if sending.

75
00:04:46,380 --> 00:04:48,350
‫So let me get back here.

76
00:04:49,230 --> 00:04:50,850
‫Let me change the border.

77
00:04:52,220 --> 00:04:56,060
‫And I can turn water off same color that I'm trying to use during homework.

78
00:04:56,810 --> 00:05:00,260
‫So let me try to use a much lighter color.

79
00:05:02,190 --> 00:05:04,320
‫All this is great.

80
00:05:05,790 --> 00:05:09,430
‫Model one fixer solid.

81
00:05:09,660 --> 00:05:12,090
‫And this is going to save.

82
00:05:13,660 --> 00:05:14,580
‫Get back here.

83
00:05:16,160 --> 00:05:16,670
‫You see.

84
00:05:18,200 --> 00:05:20,450
‫Now this is happening when we are hovering.

85
00:05:23,040 --> 00:05:24,510
‫I hope you got the idea.

86
00:05:24,900 --> 00:05:28,980
‫So this is a great example of how Howard can state.

87
00:05:29,370 --> 00:05:36,000
‫Maybe we can use these property by default, maybe instead of this Howard right now, just see this

88
00:05:36,000 --> 00:05:36,560
‫forgotten.

89
00:05:36,990 --> 00:05:38,310
‫OK, this is the bottom.

90
00:05:38,610 --> 00:05:42,500
‫Let me also add somebody so I can have some extra space.

91
00:05:42,510 --> 00:05:48,540
‫Maybe use padding as zero point two grim saying Get back here.

92
00:05:49,240 --> 00:05:54,780
‫OK, on the top and bottom, let me change the 0.3 and for the other one 0.2.

93
00:05:59,740 --> 00:06:06,490
‫OK, much better now, I can add some hover effect, or maybe let me just do three itself if this looks

94
00:06:06,490 --> 00:06:06,850
‫fine.

95
00:06:07,300 --> 00:06:07,930
‫Much better.

96
00:06:07,930 --> 00:06:13,210
‫So I am going to keep this as zero point three and now I can add our effect.

97
00:06:13,220 --> 00:06:17,200
‫So as soon as Barton got power.

98
00:06:18,390 --> 00:06:26,100
‫I can maybe change the color of this button, so I'm going to change the font color as well as I'm not

99
00:06:26,100 --> 00:06:29,280
‫going to change of one color, but maybe done it a bit darker.

100
00:06:30,430 --> 00:06:32,380
‫So maybe something like this.

101
00:06:34,130 --> 00:06:35,000
‫Get back here.

102
00:06:36,520 --> 00:06:39,250
‫It's stalker, I need to change the border controls, so.

103
00:06:41,650 --> 00:06:46,360
‫Changes to exactly the same that they are changing the background color.

104
00:06:48,170 --> 00:06:50,100
‫You're going to see that side is going to work.

105
00:06:50,430 --> 00:06:56,280
‫So how much effect is important for Borden's, maybe for different Typekit on that item?

106
00:06:56,640 --> 00:07:01,680
‫Maybe when we are using images, we want to increase their size, so it's important.

107
00:07:04,330 --> 00:07:08,710
‫Now, the next one that I'm going to discuss about is related to this focus.

108
00:07:09,890 --> 00:07:15,410
‫Whenever we click there, I want something in background, maybe some walk shadow or maybe anything

109
00:07:15,410 --> 00:07:15,740
‫else.

110
00:07:16,190 --> 00:07:20,990
‫So if I jump on to my input and if I use focus.

111
00:07:21,940 --> 00:07:24,490
‫And you can see I can change the background color.

112
00:07:25,330 --> 00:07:29,380
‫Maybe they should be doing background color or something, which is dark.

113
00:07:29,980 --> 00:07:34,720
‫Poppy, this one appears to say, I see it back here.

114
00:07:36,610 --> 00:07:38,860
‫Harry Franklin, now you can see it's Junior.

115
00:07:39,580 --> 00:07:46,450
‫You're going to see, so that's our focus is going to that means we are going to change the value when

116
00:07:46,450 --> 00:07:48,730
‫we are focusing on them, basically.

117
00:07:49,270 --> 00:07:53,680
‫So this also works well to make our team consistent.

118
00:07:53,680 --> 00:07:58,810
‫So maybe we are walking with something that is dog behind the scene to ask when I have someone click

119
00:07:58,810 --> 00:08:00,280
‫here, I want to change the color.

120
00:08:00,790 --> 00:08:04,190
‫So this is the basic thing and we can do with more properties here.

121
00:08:04,210 --> 00:08:05,740
‫I'm just using background color.

122
00:08:06,040 --> 00:08:09,520
‫Maybe I want to our chat, or maybe I want to change the font color.

123
00:08:09,910 --> 00:08:13,900
‫So by default, if I write something here, it doesn't need black color.

124
00:08:15,170 --> 00:08:17,870
‫You cannot even see if you can argue against him.

125
00:08:18,230 --> 00:08:25,640
‫OK, so maybe I want to change different colors or I can change it to white, save this one and get

126
00:08:25,640 --> 00:08:26,210
‫back here.

127
00:08:27,420 --> 00:08:32,610
‫No, again, this is white, get black hair, black, white, black, white, black.

128
00:08:33,610 --> 00:08:37,030
‫So that's how you can control things when they are in focus.

129
00:08:38,170 --> 00:08:42,700
‫So this is basically how we select things in isolation state.

130
00:08:44,770 --> 00:08:52,020
‫Now had the next example that I want to make is about after and before, so maybe I have this head dog

131
00:08:52,030 --> 00:08:54,400
‫and I want to add something after this.

132
00:08:57,100 --> 00:09:03,220
‫I'm not adding here with my HMO, but through my thesis, what I can do is I can just select where I

133
00:09:03,220 --> 00:09:07,540
‫want and then use double colon and then I can select after.

134
00:09:08,770 --> 00:09:10,780
‫Inside this I can use on be.

135
00:09:12,030 --> 00:09:18,150
‫And then just describe whatever I want to add, maybe I'll just use Dash and remember to pass devalue

136
00:09:18,150 --> 00:09:19,080
‫inside this code.

137
00:09:19,950 --> 00:09:25,500
‫If I see this one, get back and you can see this is it had now head, I cannot select this.

138
00:09:25,500 --> 00:09:28,470
‫The first thing is I can select this part.

139
00:09:28,470 --> 00:09:30,240
‫If you see, I cannot select this.

140
00:09:30,750 --> 00:09:37,500
‫Also, if I jump inside my body and get into when I do see this, I see down here you can see players

141
00:09:37,500 --> 00:09:38,010
‫to travel.

142
00:09:38,020 --> 00:09:41,310
‫But this dash is when my after.

143
00:09:42,210 --> 00:09:44,010
‫So this is where content is.

144
00:09:44,010 --> 00:09:44,970
‫That is my content.

145
00:09:45,720 --> 00:09:48,090
‫And that's how you can add after.

146
00:09:48,270 --> 00:09:52,470
‫So it has multiple use cases when we are working with maybe in future.

147
00:09:52,470 --> 00:09:57,060
‫You work with daily script in the future and maybe you do something else, then it is great.

148
00:09:57,060 --> 00:10:00,990
‫Otherwise you are not going to use basically as a beginner here.

149
00:10:00,990 --> 00:10:03,720
‫I can also use before saved this one.

150
00:10:03,720 --> 00:10:04,590
‫Get back here.

151
00:10:04,620 --> 00:10:08,310
‫You can see an outsider here, but I cannot selected again.

152
00:10:08,310 --> 00:10:09,240
‫This is people.

153
00:10:10,640 --> 00:10:15,020
‫There's also use when we are working with something related to salt water, and so I want you to send

154
00:10:15,020 --> 00:10:18,050
‫some values and you can add it too often before.

155
00:10:19,050 --> 00:10:22,950
‫I don't want to go in detail, I don't, but just keep our focus as a beginner.

156
00:10:23,550 --> 00:10:27,390
‫So this was the things that we can do with after and before.

157
00:10:27,690 --> 00:10:31,420
‫Now let me discuss the important one, which is how to select their child.

158
00:10:31,440 --> 00:10:39,060
‫That means if I'm working with some list, maybe this content that I have a parent and then I have multiple

159
00:10:39,060 --> 00:10:41,940
‫child and my selector depends on this child.

160
00:10:41,940 --> 00:10:48,570
‫So I suppose I say or select this, you will and then select the first light on that means first child,

161
00:10:48,900 --> 00:10:54,490
‫or maybe select this paragraph and only select the first line or something like this.

162
00:10:54,510 --> 00:11:01,980
‫I suppose I have a paragraph here which has not around 50, and I want to select the first line only.

163
00:11:01,980 --> 00:11:03,660
‫I don't want to select everything is.

164
00:11:04,080 --> 00:11:06,390
‫So that's where we can do certain changes.

165
00:11:06,420 --> 00:11:15,840
‫So if I jump ahead and maybe select be had, if you just use one call on and see all the example, you

166
00:11:15,840 --> 00:11:21,660
‫will see force later, then you have first line the previous first line for now.

167
00:11:21,660 --> 00:11:24,060
‫And maybe let me change the background color.

168
00:11:24,270 --> 00:11:27,540
‫And if I use the background color, something else, save this one.

169
00:11:27,570 --> 00:11:28,350
‫Get back in.

170
00:11:28,740 --> 00:11:33,600
‫You can see whatever my screen size will be, it will only apply to the first line.

171
00:11:33,960 --> 00:11:36,570
‫So that's how we can select only the first line.

172
00:11:36,930 --> 00:11:41,970
‫Now, maybe I want to add for Force First Letter itself, so I have this option.

173
00:11:41,970 --> 00:11:44,100
‫Save this one if I can.

174
00:11:44,160 --> 00:11:49,440
‫You can see only the first letter I if you remember the magazines, if you remember the news website

175
00:11:49,830 --> 00:11:54,210
‫that try to only select the first letter and change the font size.

176
00:11:54,720 --> 00:12:03,330
‫So here, if I'm using font 16 pixels, the font size are 16 pixels I can utilize maybe one point one

177
00:12:03,330 --> 00:12:08,010
‫rim something like this to increase my font size if you remember this.

178
00:12:08,370 --> 00:12:14,790
‫They usually have force letter or maybe capital, maybe bold or maybe greater in size.

179
00:12:15,090 --> 00:12:16,710
‫So that's how this is going to work.

180
00:12:18,670 --> 00:12:23,050
‫Now here, let me discuss about how to work with different siblings as well as child.

181
00:12:23,530 --> 00:12:30,160
‫So I suppose on working with this, you will on it has many child and I want to select maybe the first

182
00:12:30,160 --> 00:12:33,790
‫one only among all these siblings or maybe the third one only.

183
00:12:34,210 --> 00:12:38,620
‫What I can do is I can get her select the invite and then I can focus.

184
00:12:38,620 --> 00:12:41,140
‫If I want the divorce child, I can utilize that.

185
00:12:41,530 --> 00:12:44,500
‫Or maybe I can use this option, which is an it child.

186
00:12:44,860 --> 00:12:51,010
‫And with child, I want the first one and then I can simply say, OK, agenti background color.

187
00:12:51,190 --> 00:12:53,310
‫So on, I'm going to use this one.

188
00:12:53,320 --> 00:12:54,280
‫Save this one.

189
00:12:54,280 --> 00:12:54,760
‫Get back.

190
00:12:55,540 --> 00:13:01,000
‫You can see I'm the oldest child that is, and I selected the first one I had.

191
00:13:01,000 --> 00:13:03,440
‫Remember, it depends on this sibling connection.

192
00:13:03,880 --> 00:13:08,150
‫So if I have this list again, save this one.

193
00:13:08,170 --> 00:13:09,010
‫Get back here.

194
00:13:09,310 --> 00:13:14,950
‫You can see both us child are in this whole background color.

195
00:13:16,110 --> 00:13:22,020
‫So this is the very first time this is all before us today for this bit and so only for China, which

196
00:13:22,020 --> 00:13:23,460
‫I really will be.

197
00:13:23,640 --> 00:13:29,460
‫With this background color also, I can use the fifth one and see if I can.

198
00:13:29,580 --> 00:13:30,600
‫You see it first on?

199
00:13:31,890 --> 00:13:33,270
‫Now, I had one important thing.

200
00:13:33,420 --> 00:13:34,730
‫This is an agile.

201
00:13:34,990 --> 00:13:41,130
‫We have other properties also, maybe I just want to select the first one, so I have property for sale

202
00:13:41,490 --> 00:13:47,460
‫and then I can directly the magnolia corner so I can use this across, say, good backyard.

203
00:13:47,910 --> 00:13:49,260
‫You can see the fourth child.

204
00:13:50,630 --> 00:13:54,140
‫There are multiple others, but these are the common one, actually.

205
00:13:54,410 --> 00:13:56,750
‫And you don't need to mess too much here.

206
00:13:56,840 --> 00:14:03,140
‫But this is available, so maybe if you want in future, you can directly read it will debut a few minutes.

207
00:14:03,770 --> 00:14:06,680
‫As a beginner, it's hard for you to utilize all of them.

208
00:14:06,680 --> 00:14:13,220
‫Maybe once in a while you might use force later, Fastlane, Annette or something like this.

209
00:14:14,030 --> 00:14:16,070
‫Also, let me jump onto our game.

210
00:14:16,070 --> 00:14:22,400
‫If you remember this game, we competed in 14 as well as we competed the last values.

211
00:14:22,940 --> 00:14:27,980
‫So if you jump in now selective Rothschild, that is on level 15.

212
00:14:29,020 --> 00:14:32,190
‫Here you can see the US selects select the top orange.

213
00:14:32,210 --> 00:14:36,760
‫That means if this is the list inside our played, we have three oranges.

214
00:14:36,770 --> 00:14:43,070
‫What I need to do is use the orange and then I can directly sneak the first child.

215
00:14:46,060 --> 00:14:50,530
‫There's one then I have option to select the Apple and the pickle on the blade.

216
00:14:51,040 --> 00:14:54,670
‫Now here we have related to only child in father.

217
00:14:54,670 --> 00:14:56,800
‫Also, we are going to have lost child.

218
00:14:56,890 --> 00:14:58,690
‫You don't need to remember them all.

219
00:14:58,990 --> 00:15:03,450
‫Now, had we have any child, so maybe we have these three blades for blades.

220
00:15:03,460 --> 00:15:09,430
‫And if I want to select the third one, what I can do is I can directly select the blade and then pass

221
00:15:09,450 --> 00:15:12,460
‫the value that I need only and it child.

222
00:15:13,120 --> 00:15:17,860
‫And in my parenthesis, I need to pass the third one present to this one.

223
00:15:18,520 --> 00:15:24,610
‫Now, had we have lost child and keep on hauling a member, you don't need to remember all of them.

224
00:15:24,610 --> 00:15:27,610
‫Actually, it is good to just view them.

225
00:15:27,610 --> 00:15:28,450
‫Read about them.

226
00:15:28,780 --> 00:15:30,130
‫Don't remember right now.

227
00:15:30,250 --> 00:15:34,270
‫Maybe whenever you have a specific case to use, jump onto Google.

228
00:15:34,270 --> 00:15:36,750
‫It's free and no one is restricting you.

229
00:15:37,060 --> 00:15:38,680
‫Make sure we are not in school now.

230
00:15:38,860 --> 00:15:40,170
‫We can Google things.

231
00:15:40,180 --> 00:15:42,070
‫No one is restricting us, just Google.

232
00:15:42,070 --> 00:15:48,190
‫Search about things whenever you have any problem now or any topic that you have a problem with, search

233
00:15:48,190 --> 00:15:51,700
‫and see different blogs or any other type of content.

234
00:15:52,720 --> 00:15:58,300
‫I hope this lecture was helpful, and all you understand about these first child fossils before focus

235
00:15:58,300 --> 00:16:00,310
‫how and few other properties.

236
00:16:00,970 --> 00:16:02,020
‫Thank you for calling.

237
00:16:02,050 --> 00:16:04,000
‫And I assume right in the next one.