1 00:00:00,300 --> 00:00:00,870 ‫Hey, there. 2 00:00:00,990 --> 00:00:02,760 ‫Welcome back, Siobhan, the site. 3 00:00:03,330 --> 00:00:07,170 ‫Now let us understand our next important topic selectors. 4 00:00:07,620 --> 00:00:08,820 ‫It's pretty important. 5 00:00:09,480 --> 00:00:11,850 ‫And let me give you a brief idea about it. 6 00:00:12,420 --> 00:00:19,830 ‫So whenever we are working with tons of HQ Al Gore, we need to select the right Doug Right element 7 00:00:19,830 --> 00:00:20,910 ‫to apply our design. 8 00:00:21,450 --> 00:00:23,880 ‫Since now, we have tons of content. 9 00:00:24,240 --> 00:00:31,050 ‫There are chances that we are going to have same class names, so we have several same class name now 10 00:00:31,260 --> 00:00:32,790 ‫or same content. 11 00:00:33,510 --> 00:00:38,700 ‫And then there are chances that we have tons of order and we cannot apply it to each and every line 12 00:00:38,700 --> 00:00:39,180 ‫of code. 13 00:00:39,690 --> 00:00:44,250 ‫So that's where this topic comes into picture, which is selectors. 14 00:00:44,940 --> 00:00:47,580 ‫It's an in-depth topic and we are going to discuss about it. 15 00:00:48,000 --> 00:00:50,910 ‫We are going to discuss the most important things, Dodd said. 16 00:00:51,030 --> 00:00:53,730 ‫That has and then practice it with the game. 17 00:00:54,540 --> 00:01:00,870 ‫The first thing is, whenever we are working with this whole code, we need to select the right tag 18 00:01:00,900 --> 00:01:02,800 ‫on which we need to apply anyway. 19 00:01:03,300 --> 00:01:09,150 ‫So I suppose if I want to apply an effect, all the AMG tags, I will select this I am your dog directly. 20 00:01:09,690 --> 00:01:15,360 ‫But maybe if I want to filter things in-depth, then maybe I start working with glasses. 21 00:01:15,360 --> 00:01:18,750 ‫Maybe I start working with ideas and keep on falling. 22 00:01:19,200 --> 00:01:21,480 ‫So that's how these selectors are important. 23 00:01:21,720 --> 00:01:28,590 ‫But remember, these are not restricted to these two or three things that as IED class and these bags. 24 00:01:28,680 --> 00:01:29,940 ‫They are more than that. 25 00:01:30,240 --> 00:01:34,890 ‫Let's start with this now before moving forward with this topic in-depth. 26 00:01:35,100 --> 00:01:40,710 ‫Let me quickly give you the understanding based understanding of what I have done with this whole web 27 00:01:40,710 --> 00:01:41,100 ‫page. 28 00:01:41,790 --> 00:01:44,190 ‫So let me try to minimize them. 29 00:01:45,300 --> 00:01:51,110 ‫Yeah, I've created a body inside that I have three section, which is header mean as well as water 30 00:01:51,690 --> 00:01:56,220 ‫inside my head that I added on navigation, which includes my image. 31 00:01:56,220 --> 00:01:57,240 ‫That is my logo. 32 00:01:57,450 --> 00:02:00,630 ‫And then my edge back, which is my tagline. 33 00:02:00,750 --> 00:02:03,950 ‫I also added some glass so I can refer them easily. 34 00:02:04,390 --> 00:02:07,530 ‫Here I have logo glass, as well as my tagline Glass. 35 00:02:08,100 --> 00:02:10,260 ‫And then I have ideas and collagen. 36 00:02:10,560 --> 00:02:12,560 ‫That's a that's all about Dada. 37 00:02:13,300 --> 00:02:19,440 ‫Then here I have my means section that actually includes two sections inside my main. 38 00:02:19,860 --> 00:02:25,170 ‫The first section is about our blog post, and then the second section is related to contact us. 39 00:02:25,860 --> 00:02:28,500 ‫So here in our blog post, I have an article. 40 00:02:28,510 --> 00:02:32,590 ‫Then article includes Header, which is my H1 heading as well as image. 41 00:02:33,120 --> 00:02:34,950 ‫And then I have two dogs. 42 00:02:34,950 --> 00:02:36,930 ‫That is something like a description. 43 00:02:37,260 --> 00:02:43,440 ‫And then I have divided into multiple divisions that include some heading about age group that can be 44 00:02:43,440 --> 00:02:44,280 ‫some bullet point. 45 00:02:44,640 --> 00:02:50,030 ‫And then I have three dogs and then the end, I have some paragraph that's done. 46 00:02:50,040 --> 00:02:51,360 ‫That's my article. 47 00:02:51,900 --> 00:02:58,640 ‫So that's done for my section and then a five second section in which I have heading some paragraph 48 00:02:58,650 --> 00:03:06,210 ‫up from another paragraph that said, simple, I created so much of code so that we can experiment with 49 00:03:06,210 --> 00:03:09,480 ‫different properties as well as understand select properly. 50 00:03:10,170 --> 00:03:17,100 ‫Then I have a folder again, just our logo, our tag line and then some list list item. 51 00:03:17,100 --> 00:03:22,260 ‫So I have a home about contact us and registration link not set. 52 00:03:22,860 --> 00:03:28,750 ‫So I have created these three sections and we are going to play with the basic thing. 53 00:03:28,770 --> 00:03:33,050 ‫Nothing fancy, nothing difficult also, or we have discussed all of them. 54 00:03:33,540 --> 00:03:34,020 ‫Also. 55 00:03:36,150 --> 00:03:39,690 ‫Since now, we have some room to play with different settings. 56 00:03:40,290 --> 00:03:43,830 ‫Also, you can download this wine tourism section. 57 00:03:45,260 --> 00:03:46,640 ‫So let's start our journey. 58 00:03:46,820 --> 00:03:50,330 ‫The first one is selecting things directly by our dogs. 59 00:03:50,660 --> 00:03:56,960 ‫So maybe if I want to select all the images on my file, on my web page and then change their size, 60 00:03:57,290 --> 00:04:03,440 ‫or maybe I want to select all the extra tags or maybe all the extra tags, I can do different tasks. 61 00:04:04,010 --> 00:04:09,440 ‫So let's start with this and let me select all the images for now and. 62 00:04:10,760 --> 00:04:17,980 ‫Change their face so I can utilize work and I can save it, that's 300 picks, and then I can select 63 00:04:17,990 --> 00:04:21,020 ‫height and set it to 200 pixels. 64 00:04:21,620 --> 00:04:22,520 ‫Save this one. 65 00:04:22,550 --> 00:04:24,010 ‫Get on to my web page. 66 00:04:25,510 --> 00:04:28,150 ‫Here you can see I got different sizes. 67 00:04:28,540 --> 00:04:30,280 ‫That means 300 by 200. 68 00:04:32,380 --> 00:04:39,010 ‫OK, this looks fine, but I don't want this since I want my logo to be off 50 150. 69 00:04:39,340 --> 00:04:42,190 ‫But for my feature image, I have some different plans. 70 00:04:42,520 --> 00:04:50,170 ‫What I can do is instead of using this image, I can select things with glasses so I can use my glasses 71 00:04:50,470 --> 00:04:53,800 ‫and I can utilize my logo. 72 00:04:55,010 --> 00:05:02,420 ‫And had I canceled my event as well as hike, so it is going to be a pixel and head high, that's going 73 00:05:02,420 --> 00:05:03,530 ‫to be pretty pixel. 74 00:05:04,710 --> 00:05:05,550 ‫This looks fine. 75 00:05:05,580 --> 00:05:06,720 ‫Let me get back here. 76 00:05:07,170 --> 00:05:11,070 ‫OK, much better, but again, then we have this provided image. 77 00:05:11,490 --> 00:05:12,300 ‫Scroll down. 78 00:05:12,660 --> 00:05:13,050 ‫OK? 79 00:05:13,140 --> 00:05:14,010 ‫This is better. 80 00:05:14,940 --> 00:05:16,980 ‫I want to improve this image. 81 00:05:16,980 --> 00:05:20,070 ‫Also, what I can do is I can select my feature image. 82 00:05:21,090 --> 00:05:22,230 ‫What has returned the image? 83 00:05:22,230 --> 00:05:27,060 ‫I give this blog post image I name, so I give this as featured image. 84 00:05:27,780 --> 00:05:29,550 ‫All I have to do is select this idea. 85 00:05:29,550 --> 00:05:31,650 ‫Actually, I can take it back. 86 00:05:31,800 --> 00:05:37,320 ‫So take this idea and then I can select work as 300 pixel. 87 00:05:38,860 --> 00:05:42,010 ‫And then hired as 200 and. 88 00:05:43,440 --> 00:05:44,340 ‫Save this one. 89 00:05:44,370 --> 00:05:45,210 ‫Get back here. 90 00:05:46,120 --> 00:05:46,840 ‫OK. 91 00:05:48,040 --> 00:05:51,880 ‫This is going great now we have some information about only three methods. 92 00:05:52,880 --> 00:05:58,580 ‫Now there is one other one, which is universal selector, that means select every single thing. 93 00:05:58,820 --> 00:06:00,410 ‫So if I use this asterisk? 94 00:06:01,740 --> 00:06:09,470 ‫And then if I try to do anything, it will affect my complete Web page, so maybe I change colour, 95 00:06:09,480 --> 00:06:12,720 ‫default font color so I can use this color option. 96 00:06:13,200 --> 00:06:20,610 ‫And by default, let me try to change the color of our entire web page something that has dark, maybe 97 00:06:20,730 --> 00:06:21,930 ‫select gray for now. 98 00:06:22,020 --> 00:06:24,240 ‫And if I save this one, get back here. 99 00:06:25,200 --> 00:06:28,170 ‫You can see now everything has changed all the text. 100 00:06:28,650 --> 00:06:31,140 ‫Every single color is changed to gray. 101 00:06:31,140 --> 00:06:33,990 ‫That is, by default, text color change to gray. 102 00:06:34,710 --> 00:06:35,970 ‫Now this is important. 103 00:06:36,240 --> 00:06:38,640 ‫This helps us to give us universal control. 104 00:06:38,730 --> 00:06:44,940 ‫Maybe I want to set a default size up on to something so I can select the font size here. 105 00:06:46,310 --> 00:06:51,560 ‫And I can or maybe 30 bucks so we can see the visual change. 106 00:06:52,190 --> 00:06:56,270 ‫And if I get back here, you can see everything is too big now. 107 00:06:57,170 --> 00:06:59,480 ‫I hope you got the idea what we are trying to do. 108 00:06:59,900 --> 00:07:02,180 ‫So that's how this universal is important. 109 00:07:02,180 --> 00:07:08,660 ‫We can control a lot of things because of this and also we can do some default setting for our web page. 110 00:07:08,990 --> 00:07:14,840 ‫So if I said default theme maybe or color as green, that means every text will be great. 111 00:07:15,260 --> 00:07:22,730 ‫We can then override by adding custom CSIS to their classes ID as in 96. 112 00:07:23,210 --> 00:07:24,320 ‫So this is important. 113 00:07:25,070 --> 00:07:26,360 ‫So that's all for basic. 114 00:07:26,360 --> 00:07:27,560 ‫I hope you got the idea. 115 00:07:27,560 --> 00:07:34,130 ‫There were before one dogs, then directly with my class, had my I.D. And then, you know, I sent 116 00:07:34,130 --> 00:07:34,640 ‫a letter. 117 00:07:35,180 --> 00:07:38,270 ‫Now the next one is important, which is known as grouping. 118 00:07:38,270 --> 00:07:38,930 ‫Select that. 119 00:07:39,890 --> 00:07:46,220 ‫So suppose I want to add changes to H1, and I want to have all each one hurting as something related 120 00:07:46,220 --> 00:07:46,790 ‫to Blue. 121 00:07:47,060 --> 00:07:53,750 ‫Similarly, I want something for H2 and so I want H1 to be blue and similarly H2 that should be blue. 122 00:07:54,560 --> 00:08:01,970 ‫Here, let me add this H1 and I can add this color and something related to blue. 123 00:08:05,070 --> 00:08:05,970 ‫This is fine. 124 00:08:06,140 --> 00:08:13,140 ‫And similarly, I want it to be blue also, so what I'm going to do is I'm going to use color and same 125 00:08:13,140 --> 00:08:13,770 ‫value. 126 00:08:19,560 --> 00:08:23,380 ‫Our head, if you look at the changes, you can see they are in blue now. 127 00:08:23,890 --> 00:08:28,750 ‫So if I want to do something similar for others, I don't need to write them individually. 128 00:08:28,930 --> 00:08:33,490 ‫What I can do is I can utilize a comma and then use edge to head. 129 00:08:34,030 --> 00:08:37,900 ‫So instead of writing this differently, I can just grab them. 130 00:08:38,290 --> 00:08:44,710 ‫So if I want any other dog, any other element that I need to capture the exact same property and value 131 00:08:45,040 --> 00:08:51,070 ‫what I can do if I can utilize this grouping, maybe I one for H3 also, so I don't need to write manually. 132 00:08:51,070 --> 00:08:57,220 ‫For all three, I can use a comma and then just define the name of that element, or I choose this selector. 133 00:08:57,940 --> 00:08:59,560 ‫And that's how it is going to work. 134 00:09:00,070 --> 00:09:04,820 ‫Maybe it can be anything related to class and it can be anything related to it. 135 00:09:05,500 --> 00:09:09,300 ‫Also, I can then write for each three anything else. 136 00:09:09,300 --> 00:09:11,860 ‫So maybe there are several other properties here. 137 00:09:12,250 --> 00:09:17,770 ‫Maybe not just the color, but there can be anything related to background or there can be anything 138 00:09:17,770 --> 00:09:24,460 ‫related to water also so that our concerns that we have multiple properties, but later on, I want 139 00:09:24,460 --> 00:09:26,330 ‫one extra property for history. 140 00:09:26,410 --> 00:09:27,670 ‫I can write it here. 141 00:09:28,060 --> 00:09:34,270 ‫So maybe I want to change the font family, which is related to the style of one that you are working 142 00:09:34,270 --> 00:09:34,670 ‫with to. 143 00:09:34,690 --> 00:09:38,800 ‫These are all the really heavily one family and I can directly select them. 144 00:09:39,250 --> 00:09:43,540 ‫And that said, so all the common changes of age three are captured here. 145 00:09:43,600 --> 00:09:47,350 ‫But if I have some specific change, I can also add them here. 146 00:09:47,860 --> 00:09:50,200 ‫That's how it is going to work and both will be applied. 147 00:09:51,570 --> 00:09:55,210 ‫So I hope you got the idea, what I was trying to do with this grouping thing. 148 00:09:55,380 --> 00:10:00,050 ‫It's pretty important and we are going to use that a lot on this one. 149 00:10:00,060 --> 00:10:01,260 ‫I hope we got the idea. 150 00:10:02,130 --> 00:10:06,270 ‫Now the next one is going to be important, which is known as Combinator. 151 00:10:07,020 --> 00:10:08,190 ‫Why that important? 152 00:10:08,670 --> 00:10:15,840 ‫Well, because they help us to select things, or I should say, target filter things precisely so I 153 00:10:15,840 --> 00:10:17,130 ‫won't select anything. 154 00:10:17,130 --> 00:10:19,170 ‫I can utilize these combinator. 155 00:10:19,770 --> 00:10:25,290 ‫The first thing you need to understand head is parent child relationship, and that's why I have created 156 00:10:25,290 --> 00:10:26,340 ‫this big section. 157 00:10:26,970 --> 00:10:32,160 ‫So if I say, what is the parent of this be that it is going to be this day? 158 00:10:32,730 --> 00:10:37,290 ‫But if I say, what is the parent of this do, it is going to be this article. 159 00:10:37,800 --> 00:10:42,180 ‫So you need to understand, did Dyadic parent and child relationship? 160 00:10:42,540 --> 00:10:43,440 ‫It's important. 161 00:10:43,830 --> 00:10:51,780 ‫Now let me ask you what is dissembling of this H-2 so supposed sibling, as well as this be sibling? 162 00:10:52,200 --> 00:10:56,250 ‫So whenever everything is inside a particular tag, they are sibling. 163 00:10:57,250 --> 00:11:04,300 ‫Similarly, her hair is trembling with this feedback, this feedback and this div tag and keep on falling, 164 00:11:04,810 --> 00:11:08,650 ‫but remember there is no relationship with this H2 in this header. 165 00:11:09,040 --> 00:11:14,230 ‫So you need to understand this direct relationship, which is about parent and child and sibling. 166 00:11:14,980 --> 00:11:19,960 ‫The next one is about and sister, I know I'm going to leave, but it's important. 167 00:11:19,960 --> 00:11:23,080 ‫Once you understand these things here, it will help you a lot. 168 00:11:23,770 --> 00:11:25,840 ‫So let's discuss about this. 169 00:11:25,840 --> 00:11:27,070 ‫And sister, I should say. 170 00:11:28,000 --> 00:11:34,820 ‫This article contains everything, so it contains every single thing from head to head. 171 00:11:34,900 --> 00:11:38,350 ‫So all this content is inside article. 172 00:11:39,130 --> 00:11:40,370 ‫I hope you got this idea. 173 00:11:40,430 --> 00:11:47,200 ‫So article dogs contain everything, but article your dog is not the parent of this H2 article Tiger's 174 00:11:47,200 --> 00:11:47,950 ‫ancestor? 175 00:11:47,950 --> 00:11:54,830 ‫Definitely one experience for this head experience to this dog, this dog, this deep tag, this step 176 00:11:54,830 --> 00:11:55,150 ‫back. 177 00:11:55,690 --> 00:11:59,050 ‫My article dog is not dependent on this issue. 178 00:11:59,560 --> 00:12:02,740 ‫They've tag is only Deberian, so you need to understand. 179 00:12:02,740 --> 00:12:06,700 ‫Article Tag is definitely an ancestor for H2, but not the parent. 180 00:12:07,300 --> 00:12:09,100 ‫Make sure you understand about this. 181 00:12:10,380 --> 00:12:16,320 ‫OK, that's the whole topic about the family tree, but this is important since we are going to discuss 182 00:12:16,320 --> 00:12:18,210 ‫a lot of things on how to select. 183 00:12:19,310 --> 00:12:23,270 ‫Now, first concept that we need to understand is definitely the article one. 184 00:12:23,570 --> 00:12:28,670 ‫So suppose I want to select all the beauty pageants I in my article, what can I do? 185 00:12:28,670 --> 00:12:30,590 ‫Is I can utilize the space. 186 00:12:31,010 --> 00:12:38,000 ‫So I have article conduct an inside that I need to select all the feedback so I can add a space and 187 00:12:38,000 --> 00:12:38,780 ‫then be back. 188 00:12:39,260 --> 00:12:39,920 ‫And that's it. 189 00:12:40,430 --> 00:12:42,380 ‫So this space is important here. 190 00:12:42,410 --> 00:12:46,940 ‫What I'm going to do is I'm selecting all the feedback inside my article. 191 00:12:47,000 --> 00:12:48,800 ‫So article is an ancestor. 192 00:12:49,010 --> 00:12:54,700 ‫And B is all designed not just to direct child, but indirect child. 193 00:12:54,700 --> 00:12:59,480 ‫Also, all details which are inside this article will be selected. 194 00:12:59,750 --> 00:13:01,640 ‫So let me try to add a property here. 195 00:13:01,730 --> 00:13:04,130 ‫Maybe just change the background color for now. 196 00:13:04,400 --> 00:13:08,030 ‫And here, let me try to use Aqua. 197 00:13:08,570 --> 00:13:09,530 ‫Save this one. 198 00:13:09,770 --> 00:13:10,700 ‫Get back here. 199 00:13:11,390 --> 00:13:15,680 ‫You can see all the child inside the article is selected. 200 00:13:20,830 --> 00:13:22,570 ‫So this will be selected. 201 00:13:22,690 --> 00:13:27,610 ‫This will be selected and this will be selected as well as this one is also selected. 202 00:13:27,850 --> 00:13:30,490 ‫So elect me at two three lines here. 203 00:13:31,330 --> 00:13:33,550 ‫So you will have information about them. 204 00:13:35,790 --> 00:13:41,280 ‫See it back here, you can see it from this point till this point. 205 00:13:43,140 --> 00:13:44,730 ‫All the peacocks are selected. 206 00:13:49,090 --> 00:13:53,260 ‫So that's the first one, the second one is J Combinator. 207 00:13:53,420 --> 00:13:58,740 ‫It's also important when we want to select the direct child at this point of time. 208 00:13:58,750 --> 00:14:06,800 ‫If I was using Article, I was selecting all the all details not just to direct, but also the grandchild. 209 00:14:07,750 --> 00:14:16,180 ‫Now, if I want to select the direct child, only only this direct child what I need to utilize it instead 210 00:14:16,180 --> 00:14:19,210 ‫of the space, I need to utilize the greater than symbol. 211 00:14:19,480 --> 00:14:24,310 ‫Now, if I save this one, this is going to select only the direct child. 212 00:14:24,620 --> 00:14:25,450 ‫Get back here. 213 00:14:25,810 --> 00:14:29,740 ‫You can see this was direct child, direct child, as well as the direct child. 214 00:14:30,400 --> 00:14:38,860 ‫I jump back here you can see one direct child, one article to direct child, four articles and three 215 00:14:38,860 --> 00:14:40,270 ‫direction or article. 216 00:14:40,630 --> 00:14:43,100 ‫All of them are inside this bag. 217 00:14:43,180 --> 00:14:44,740 ‫So devastating for them. 218 00:14:45,970 --> 00:14:48,070 ‫These are actually grand total, you can say. 219 00:14:48,640 --> 00:14:51,790 ‫So that's how this giant combinator is going to work. 220 00:14:52,390 --> 00:14:59,260 ‫Then we have general sibling suppose after this header, I need to select all the ducks, so all the 221 00:14:59,270 --> 00:15:02,410 ‫siblings will read this one as well as this one. 222 00:15:03,100 --> 00:15:07,600 ‫So most if we have a new big dog inside here, that will not be our sibling. 223 00:15:08,350 --> 00:15:15,280 ‫So remember, for Haider, this will be a sibling as well as this dog will be assembling, nor did this 224 00:15:15,280 --> 00:15:15,580 ‫one. 225 00:15:16,610 --> 00:15:18,000 ‫So I hope you got the idea. 226 00:15:18,680 --> 00:15:26,840 ‫If I need to select, all I have to use is select the header first and then use this symbol and then 227 00:15:27,680 --> 00:15:31,100 ‫on her, let me try to use some background color. 228 00:15:32,660 --> 00:15:33,470 ‫Maybe this one. 229 00:15:34,340 --> 00:15:41,210 ‫Let me save and get back here, you can see after my header all these two bags are selected. 230 00:15:41,810 --> 00:15:43,580 ‫Remember this important point? 231 00:15:43,820 --> 00:15:49,070 ‫It is going to select only these siblings after this heart attack. 232 00:15:49,280 --> 00:15:54,230 ‫So suppose if I have a big dog hair, also, this will not be selected. 233 00:15:54,470 --> 00:15:59,570 ‫Only the siblings that are here after this, so they will check this. 234 00:15:59,630 --> 00:16:00,350 ‫Nope. 235 00:16:00,500 --> 00:16:01,460 ‫Yep, this one. 236 00:16:01,650 --> 00:16:02,630 ‫Yup, this one. 237 00:16:02,990 --> 00:16:04,550 ‫So that's how this is going to work. 238 00:16:05,150 --> 00:16:09,830 ‫And it's important because this will help you to select things on your level. 239 00:16:11,550 --> 00:16:12,240 ‫This is done. 240 00:16:12,540 --> 00:16:14,700 ‫How many more are? 241 00:16:16,500 --> 00:16:22,800 ‫Now, the next one is a decent sailing in a previous case and generous general in case we were selecting 242 00:16:22,800 --> 00:16:23,400 ‫everywhere. 243 00:16:23,640 --> 00:16:29,370 ‫So suppose this header came and then these few that came and then this big game, then this brave game, 244 00:16:29,580 --> 00:16:31,080 ‫so we selected all of them. 245 00:16:31,470 --> 00:16:35,290 ‫But suppose I want to select the paragraph just after my header. 246 00:16:35,640 --> 00:16:42,840 ‫So if there is any paragraph just adjusting to that, just after that, immediately after that, we 247 00:16:42,840 --> 00:16:43,500 ‫can do that. 248 00:16:43,500 --> 00:16:46,320 ‫We can utilize header directly. 249 00:16:47,530 --> 00:16:52,070 ‫And then we can use this plus symbol and then whatever Tiger, you anyone here? 250 00:16:52,120 --> 00:16:52,990 ‫Not just dogs. 251 00:16:52,990 --> 00:16:54,130 ‫We can have classes. 252 00:16:54,130 --> 00:16:54,970 ‫We can have it. 253 00:16:55,780 --> 00:16:57,760 ‫So now I can apply. 254 00:16:57,760 --> 00:17:04,120 ‫Any property may be background color here also, because it's easy to mod things or visualize things 255 00:17:04,600 --> 00:17:05,650 ‫and select the dog. 256 00:17:06,040 --> 00:17:06,970 ‫Saved this one. 257 00:17:06,980 --> 00:17:12,640 ‫Get back here and you can see only the direct sibling is affected, only this one. 258 00:17:13,330 --> 00:17:14,920 ‫So that's how this is going to work. 259 00:17:15,100 --> 00:17:19,120 ‫It's also important you get information how to select direct sibling. 260 00:17:19,510 --> 00:17:23,860 ‫Now, one important thing suppose if I had a dog had. 261 00:17:26,670 --> 00:17:30,290 ‫No, be just that operator, I have this it's too bad. 262 00:17:30,450 --> 00:17:34,530 ‫No, because then I'm not going to select anything you can see. 263 00:17:34,530 --> 00:17:40,050 ‫This attitude tag is as it is, and these are in effect because of our giant selector. 264 00:17:40,680 --> 00:17:46,590 ‫So now we don't have any background with dark gray that was related to our existence of being selected. 265 00:17:47,550 --> 00:17:52,680 ‫Now, this is a common thing, you don't need to remember them as you practice, so you will have understanding 266 00:17:52,680 --> 00:17:54,000 ‫about how to select things. 267 00:17:54,960 --> 00:18:01,050 ‫Currently, you can imagine that OK, in our class here and then I can add an ID here and then select 268 00:18:01,050 --> 00:18:01,860 ‫this directly. 269 00:18:02,130 --> 00:18:09,050 ‫But once you have done so or you cannot do that, you will get confused and there will be this big estate 270 00:18:09,060 --> 00:18:11,010 ‫or CSI, which is not recommended. 271 00:18:11,610 --> 00:18:16,920 ‫You want to optimize things, you want to have optimized code and you don't want to write extra things. 272 00:18:17,400 --> 00:18:23,610 ‫The problem with writing extra content extra properties is that when you build things or when you deliver 273 00:18:23,610 --> 00:18:29,070 ‫things to on your server, it's too bulky and when you are big things you don't even remember. 274 00:18:29,070 --> 00:18:30,760 ‫OK, this idea that it all. 275 00:18:30,780 --> 00:18:34,740 ‫Then the second it is at the bottom, it's going to be too confusing. 276 00:18:34,980 --> 00:18:36,960 ‫So that's why we understand these letters. 277 00:18:37,200 --> 00:18:39,810 ‫It's a good habit you will learn as you practice. 278 00:18:40,530 --> 00:18:44,040 ‫Now there is one other important thing with this combinator. 279 00:18:45,110 --> 00:18:52,310 ‫When we want to select a combination of different classes or ID, suppose I want to select Edge to tag 280 00:18:52,760 --> 00:18:54,480 ‫that has a tag line. 281 00:18:54,530 --> 00:19:01,400 ‫So that means that if I want to select a student with Tag Line John on this tag line class can be with 282 00:19:01,400 --> 00:19:02,210 ‫anything else on. 283 00:19:02,230 --> 00:19:10,010 ‫So maybe this tag line is with this one also, but I want to select only a true tag with this tag line. 284 00:19:10,250 --> 00:19:15,560 ‫What I need to do is I need to utilize this new community, which is element or element. 285 00:19:16,010 --> 00:19:22,400 ‫So what I can do is I can use a student and then dart and then whatever the class name is, which is 286 00:19:22,400 --> 00:19:23,660 ‫going to be my tag line. 287 00:19:25,810 --> 00:19:32,950 ‫In this way, I can select the edge to specifically with this class, not had this element, not element. 288 00:19:33,430 --> 00:19:38,620 ‫That means if I need to select any other element with any other class, I can do that. 289 00:19:38,920 --> 00:19:42,300 ‫Maybe I want to select tagline with fodder. 290 00:19:42,490 --> 00:19:49,660 ‫That means I want to select a class which has old tagline as well as what are what I can do is I can 291 00:19:49,660 --> 00:19:51,340 ‫utilize this same thing. 292 00:19:51,730 --> 00:19:53,170 ‫Select Tag Line. 293 00:19:53,320 --> 00:19:54,630 ‫Don't forget. 294 00:19:55,210 --> 00:20:00,910 ‫So this will select all the elements that has dog tag line as their class as well as -.FOR. 295 00:20:00,930 --> 00:20:04,830 ‫But as the class may be held, you can have something that required you. 296 00:20:04,840 --> 00:20:11,930 ‫Maybe this was not the case, but you had something like aioli equals scoop footnote. 297 00:20:13,140 --> 00:20:20,160 ‫And this was the case then you need to utilize this concept here, and we try to add on background color 298 00:20:20,160 --> 00:20:21,660 ‫so we can see the changes. 299 00:20:23,550 --> 00:20:26,790 ‫Save this one and had I'm selecting this to. 300 00:20:28,390 --> 00:20:29,410 ‫You going to see? 301 00:20:30,500 --> 00:20:36,800 ‫So that's the power you can say we can customize and we can select things directly, it's important 302 00:20:37,190 --> 00:20:38,720 ‫at this point of time, no. 303 00:20:38,930 --> 00:20:45,200 ‫But as you move forward, chances are most of these students are not aware about how to select all of 304 00:20:45,200 --> 00:20:45,530 ‫these. 305 00:20:46,590 --> 00:20:48,660 ‫So that's it, that's all for this lecture. 306 00:20:48,690 --> 00:20:49,830 ‫This was important. 307 00:20:50,310 --> 00:20:55,770 ‫Make sure to practice, make sure to download the initial file and then do all of these together. 308 00:20:56,190 --> 00:21:00,480 ‫I have tried to create multiple cases here and you can select all of them. 309 00:21:00,930 --> 00:21:02,370 ‫So that's all for this lecture. 310 00:21:02,400 --> 00:21:08,190 ‫Now, in the next lecture, we are going to play a game and revise whatever we have learned along regarding 311 00:21:08,190 --> 00:21:08,940 ‫selectors. 312 00:21:09,750 --> 00:21:12,240 ‫Thank you for calling, and I see guys in the next one.