1 00:00:01,740 --> 00:00:07,020 Welcome back, my friends, to another lecture today, what we're going to do is we are going to create 2 00:00:07,020 --> 00:00:08,850 a multiple query selectors. 3 00:00:09,420 --> 00:00:13,210 We're not going to create we're going to learn a lot about them because last lecture. 4 00:00:13,500 --> 00:00:17,840 So if you haven't watched that, please go back, check this out, check out that lecture. 5 00:00:17,850 --> 00:00:25,560 And so it's about single query selector where we get the elements using the git element by idea. 6 00:00:25,830 --> 00:00:31,810 And after that we use the query select, which is more modern and widely used. 7 00:00:31,920 --> 00:00:38,520 Now, I took the liberty of creating the app to G.S. file and just link it here. 8 00:00:38,880 --> 00:00:41,120 Now in my dodgiest file, it's empty. 9 00:00:41,130 --> 00:00:44,190 You should do that right here in this folder. 10 00:00:44,190 --> 00:00:44,490 Right? 11 00:00:45,900 --> 00:00:48,720 So I'm glad that we are done that. 12 00:00:48,960 --> 00:00:50,150 Now, let's continue here. 13 00:00:50,160 --> 00:00:53,380 I'm going to refresh I'm going to open the console. 14 00:00:53,550 --> 00:00:56,760 So today our lecture is about what? 15 00:00:57,000 --> 00:01:02,310 About how we can get multiple elements. 16 00:01:02,310 --> 00:01:02,670 Right. 17 00:01:03,330 --> 00:01:06,940 In that we can achieve in one go. 18 00:01:06,960 --> 00:01:16,700 So how we can get multiple elements from our DOM in one go so we can achieve that by get elements and 19 00:01:17,310 --> 00:01:20,070 get elements by class. 20 00:01:20,310 --> 00:01:24,750 Now, remember, remember last time I was happening? 21 00:01:24,990 --> 00:01:30,900 Remember last time I've told you that we're going to do this, so I'm going to create a variable here, 22 00:01:30,900 --> 00:01:31,920 spane items. 23 00:01:32,790 --> 00:01:34,310 Why did this happen? 24 00:01:34,650 --> 00:01:42,960 Because if you go here, if you go inside a you inside elai, I do have this spane items, spane items 25 00:01:42,960 --> 00:01:44,190 in every ally. 26 00:01:44,210 --> 00:01:45,510 So I have one two. 27 00:01:45,760 --> 00:01:47,940 I have four or five x four. 28 00:01:48,270 --> 00:01:53,140 So to do or every spend element, there is a title inside. 29 00:01:53,160 --> 00:01:59,750 And so writing inside and we do have to do list element title. 30 00:01:59,770 --> 00:02:00,600 That's the class. 31 00:02:00,900 --> 00:02:10,440 OK, so we get now our our variable is spane items means that we going to grab multiple items, not 32 00:02:10,440 --> 00:02:10,950 just one. 33 00:02:11,250 --> 00:02:12,420 Now how are we going to do this. 34 00:02:13,260 --> 00:02:20,140 So spell items equal to document the get element by class name. 35 00:02:20,310 --> 00:02:21,060 How cool is this. 36 00:02:21,080 --> 00:02:24,650 And we need to pass these class name that super long. 37 00:02:24,660 --> 00:02:28,200 So I'm going to copy it because I'm going to make a mistake and you're going to laugh at me. 38 00:02:28,200 --> 00:02:29,710 And that's what I don't want to do. 39 00:02:30,270 --> 00:02:31,590 Now, how cool is this? 40 00:02:32,220 --> 00:02:39,600 So if I cancel, like, I'm just going to say Girlyman by class name like this. 41 00:02:42,740 --> 00:02:47,120 And I'm just going to give you the space here, and I'm going to say concatenate this one with spane 42 00:02:47,120 --> 00:02:50,620 items, because I just want you to know what's happening here. 43 00:02:51,230 --> 00:02:56,380 So it get me the collection right now. 44 00:02:56,390 --> 00:03:02,060 We can do so if we want, for example. 45 00:03:02,300 --> 00:03:04,630 So what we can do, we can access this. 46 00:03:06,440 --> 00:03:10,490 So if we want to access any of the elements, we can do because it's a collection. 47 00:03:10,490 --> 00:03:16,520 Remember, it's not an array, but it's still we can use we can cancel lock, which is going to show 48 00:03:16,520 --> 00:03:16,940 it to you. 49 00:03:17,960 --> 00:03:24,780 We can call log spane items of the position zero and let's see what's happening. 50 00:03:24,800 --> 00:03:28,300 So when I do this, what you expect to happen. 51 00:03:28,700 --> 00:03:29,980 So it will give me this. 52 00:03:30,380 --> 00:03:31,150 I cover it. 53 00:03:31,340 --> 00:03:33,020 It will give me the first one. 54 00:03:33,350 --> 00:03:34,010 Now we can. 55 00:03:34,280 --> 00:03:34,730 We can. 56 00:03:34,760 --> 00:03:35,990 Same as before. 57 00:03:36,020 --> 00:03:37,830 We can do a lot. 58 00:03:37,850 --> 00:03:42,460 So now this because returns collection return for actually here. 59 00:03:42,560 --> 00:03:48,080 Now I'm just going to access number one, number two and number three. 60 00:03:48,560 --> 00:03:49,760 And that's it. 61 00:03:49,790 --> 00:03:54,200 So if I do number four, it will give me an error you want to see. 62 00:03:54,870 --> 00:03:58,730 So if I do number four, because I don't have it number four here. 63 00:03:58,970 --> 00:04:00,300 So it's going to say undefined. 64 00:04:01,370 --> 00:04:03,440 So that is just for show. 65 00:04:03,710 --> 00:04:10,970 Now, what we can do, we not just we able to grab them, but we can apply all of the styles that we 66 00:04:10,970 --> 00:04:11,690 want, for example. 67 00:04:11,720 --> 00:04:12,770 I just want to have this one. 68 00:04:13,040 --> 00:04:19,690 We have a style and background, not this style Savani background. 69 00:04:22,400 --> 00:04:26,110 And I'm just going to put a background as, I don't know, red. 70 00:04:26,540 --> 00:04:30,770 So last one will have a different back in this. 71 00:04:30,770 --> 00:04:37,270 By the way, it's not from here until here because we are just having the background for the last spark 72 00:04:37,280 --> 00:04:38,540 right now. 73 00:04:38,570 --> 00:04:43,250 We can just also use change the color. 74 00:04:43,490 --> 00:04:46,090 You know, we can add the text, for example, in this one. 75 00:04:46,460 --> 00:04:46,790 OK. 76 00:04:46,820 --> 00:04:48,830 Text content. 77 00:04:48,830 --> 00:04:51,460 We can change the content of the text and say this. 78 00:04:52,650 --> 00:04:55,340 This is coming from. 79 00:04:59,720 --> 00:05:06,240 From Get Element by Plassnik. 80 00:05:06,950 --> 00:05:07,460 Very good. 81 00:05:07,880 --> 00:05:10,560 Now let's see if this is changed. 82 00:05:10,580 --> 00:05:11,240 How cool is this? 83 00:05:11,840 --> 00:05:15,080 So that's pretty much what I want to show you. 84 00:05:15,380 --> 00:05:20,960 And the thing is that we have here four elements. 85 00:05:21,260 --> 00:05:30,110 But what will happen, for example, if we like to only show because we just used to get elements of 86 00:05:30,110 --> 00:05:30,920 a class name. 87 00:05:31,340 --> 00:05:40,490 Now, if I have if I have another spin outside these unordered list and let's put it here. 88 00:05:40,610 --> 00:05:45,380 So after this div, I copy it and I put it here. 89 00:05:45,800 --> 00:05:46,830 Now look what happened. 90 00:05:49,010 --> 00:05:50,800 Nothing will happen here, actually. 91 00:05:51,340 --> 00:05:56,420 And by the way, why it's not showing me how many elements I do have stretch now. 92 00:05:57,110 --> 00:05:59,480 Let's see if I'm coming this party here. 93 00:06:02,630 --> 00:06:08,420 It's showing me that the last one that I put it there, so here it is, it's printed here and it's there. 94 00:06:08,480 --> 00:06:15,400 This is why this is happening, because we're trying to find all of the elements with this class name. 95 00:06:15,710 --> 00:06:23,240 We not just specifying, OK, go in and order, at least in GRAP and why it's like this and grab. 96 00:06:25,120 --> 00:06:30,340 I'm just going to make it better so and grab everything that is that unordered release, but we can 97 00:06:30,340 --> 00:06:35,350 do that and I'm going to show you how now, because they put it outside of this scope. 98 00:06:35,380 --> 00:06:36,690 That's called a scope here. 99 00:06:36,970 --> 00:06:40,330 So this is actually like getting here globally. 100 00:06:41,150 --> 00:06:45,310 So we searching the entire damn Sujiatun document and we grabbing. 101 00:06:45,580 --> 00:06:49,930 But what if I want this to be fixed to this up here, by the way. 102 00:06:49,960 --> 00:06:51,180 This is the U.S., right? 103 00:06:51,430 --> 00:06:54,250 If you don't know it, this is where is it? 104 00:06:54,310 --> 00:06:55,750 This is the entire ULC. 105 00:06:58,240 --> 00:07:06,220 The square with the purple, yeah, the purple square or rectangle, yeah, that's the that's the U.S.. 106 00:07:06,550 --> 00:07:07,800 So how we can do that. 107 00:07:07,930 --> 00:07:14,000 So if I want to specify only to do get the elements there, I can do that. 108 00:07:14,020 --> 00:07:18,040 And by the way, so what we can do, I'm just going to change here. 109 00:07:18,040 --> 00:07:18,760 A couple of things. 110 00:07:18,990 --> 00:07:19,970 I'm just going to go here. 111 00:07:20,200 --> 00:07:33,730 So now this will get all the elements for the class name, and I'm just going to copy it. 112 00:07:33,750 --> 00:07:34,960 So we're going to use it. 113 00:07:35,170 --> 00:07:39,460 But this will get all the elements for the class name. 114 00:07:43,340 --> 00:07:49,520 An entire document is specific, it's. 115 00:07:51,330 --> 00:07:52,200 Specific. 116 00:07:56,060 --> 00:07:57,370 I can't be bothered with that. 117 00:08:00,190 --> 00:08:00,980 Yeah, nice. 118 00:08:01,270 --> 00:08:08,030 So the specific scope will be what you think the specific scope will be you items. 119 00:08:08,050 --> 00:08:14,500 I'm going to create a variable call or let's put it the variable here and declare it, you know, items 120 00:08:14,950 --> 00:08:15,550 like that. 121 00:08:16,450 --> 00:08:19,600 And I just want I just want this one. 122 00:08:19,630 --> 00:08:28,270 I copy it and put it here, but I want to change this to other items so the other items will have not 123 00:08:28,270 --> 00:08:33,340 this document get Elliman by class name, but it will have a query selector. 124 00:08:33,850 --> 00:08:35,490 Remember, we've done this before. 125 00:08:35,680 --> 00:08:43,480 So the query selector, we will say, OK, grab me the all the you will everything what you have there. 126 00:08:43,720 --> 00:08:48,230 And I'm just going to specify get elements by the class name and I'm going to paste the class name. 127 00:08:49,690 --> 00:08:54,280 Now this so comes a lot. 128 00:08:56,760 --> 00:09:05,250 Other items now, you're not going to be able to see it here, but now here he is, the collection should 129 00:09:05,250 --> 00:09:07,720 be same as here, but I don't know what's happening now. 130 00:09:08,100 --> 00:09:09,360 See, the length is four. 131 00:09:09,360 --> 00:09:11,760 And this one, by the way, the length is three. 132 00:09:12,510 --> 00:09:14,490 I mean, he's five, right? 133 00:09:14,490 --> 00:09:17,300 Because we do have one element inside. 134 00:09:17,610 --> 00:09:22,160 Now, you find one here to do console lock. 135 00:09:23,250 --> 00:09:28,610 And if I want to access the number one, I can achieve that with zero. 136 00:09:28,620 --> 00:09:28,900 Right? 137 00:09:29,070 --> 00:09:29,810 No problem. 138 00:09:29,820 --> 00:09:31,740 So it's going to print out this here. 139 00:09:32,280 --> 00:09:32,870 Here it is. 140 00:09:33,180 --> 00:09:34,800 Let's just add something here. 141 00:09:37,470 --> 00:09:38,340 Local scope. 142 00:09:41,520 --> 00:09:50,490 So we are accessing a locally here, yet local school, and here is why it's giving me that error rate, 143 00:09:51,180 --> 00:09:53,490 because I'm trying to get it here like this. 144 00:09:54,540 --> 00:09:56,580 Now I know what was the error? 145 00:09:56,590 --> 00:09:58,210 So I learned something. 146 00:09:58,560 --> 00:10:04,590 Now we do have this HMO collection with length five, and I do have this HMO collection with length 147 00:10:04,590 --> 00:10:07,610 of four right now. 148 00:10:07,980 --> 00:10:17,640 So if I try to access the collection of four, it will give me undefined because this is outside my 149 00:10:17,640 --> 00:10:18,970 scope, right? 150 00:10:19,860 --> 00:10:20,970 This is outside my scope. 151 00:10:20,970 --> 00:10:25,920 So I can do all of the same things here with this, but I'm not going to bother and I'm not gonna bother 152 00:10:25,920 --> 00:10:27,100 you to do it like that. 153 00:10:27,240 --> 00:10:29,490 So I hope I'm clear this. 154 00:10:29,490 --> 00:10:31,400 I'm going to show I'm going to explain one more time. 155 00:10:31,650 --> 00:10:37,170 So we are getting elements by the class name in that will actually search the entire document and it 156 00:10:37,170 --> 00:10:40,020 will collect everything that is with this class name. 157 00:10:40,740 --> 00:10:42,630 Doesn't matter if it's inside you. 158 00:10:42,630 --> 00:10:45,360 Well, in order at least or outside, it will get it. 159 00:10:45,480 --> 00:10:48,030 So that's globally, that's global school. 160 00:10:48,210 --> 00:10:49,050 The entire document. 161 00:10:49,290 --> 00:10:51,180 Global scope. 162 00:10:51,450 --> 00:10:51,790 Right. 163 00:10:52,590 --> 00:10:54,130 It's too long, but you need to know it. 164 00:10:54,390 --> 00:10:55,290 This is a locally. 165 00:10:55,290 --> 00:11:01,920 So I'm saying, OK, get the query selector for the USA in inside, get these elements by the class 166 00:11:01,920 --> 00:11:02,100 name. 167 00:11:02,100 --> 00:11:08,460 So that is why I can't access this one, because I'm saying, OK, everything that is here, I just 168 00:11:08,460 --> 00:11:10,680 from there to there, nothing else. 169 00:11:10,770 --> 00:11:12,270 I don't want this one by the way. 170 00:11:12,270 --> 00:11:13,650 I don't want that one as well. 171 00:11:13,660 --> 00:11:18,000 That was just for showing so you can comment that one in your lecture. 172 00:11:18,000 --> 00:11:18,810 But I'm going to delete it. 173 00:11:18,810 --> 00:11:19,130 Right. 174 00:11:20,190 --> 00:11:22,680 That's what you need to do now. 175 00:11:23,100 --> 00:11:26,820 So I've shown you one and I we have a couple of more to do to actually more. 176 00:11:27,090 --> 00:11:34,020 Now, for example, this is I'm just going to refresh again, and this is HTML collection. 177 00:11:34,020 --> 00:11:36,920 So the e-mail collection, we can do a for loop here. 178 00:11:37,200 --> 00:11:43,890 We know how to do a photo, but the thing is that it's going to be very cool if we have a way how to 179 00:11:43,920 --> 00:11:46,520 do this to make it to a rate. 180 00:11:46,570 --> 00:11:55,050 OK, now convert HDMI collection to array. 181 00:11:55,540 --> 00:11:56,630 How cool will that. 182 00:11:56,640 --> 00:11:58,710 So it's actually very, very simple. 183 00:11:58,720 --> 00:12:03,120 So where we're going to say span array because I'm going to get this many items. 184 00:12:03,130 --> 00:12:12,480 That's why I call the span array and I'm going to say, OK, array from here and I need to specify the 185 00:12:12,480 --> 00:12:14,680 collection and that's it. 186 00:12:14,700 --> 00:12:20,130 So console lock spanner and that not items actually. 187 00:12:20,130 --> 00:12:20,790 Sorry guys. 188 00:12:20,970 --> 00:12:23,670 So Spanaway should give me a rate. 189 00:12:23,670 --> 00:12:24,660 Not like here. 190 00:12:24,670 --> 00:12:26,890 XtremIO collection should be array. 191 00:12:26,950 --> 00:12:27,450 Here it is. 192 00:12:27,720 --> 00:12:30,420 So we do array zero one, two, three and four. 193 00:12:30,870 --> 00:12:31,860 Very cool. 194 00:12:31,860 --> 00:12:33,890 So I can do a lot of things with this battery. 195 00:12:33,930 --> 00:12:37,710 For example, I can get the class name, I can change something here. 196 00:12:38,700 --> 00:12:46,110 And by the way, we can also access the same way we did it this year, for example, the number one. 197 00:12:47,280 --> 00:12:49,350 And if I print it out, it will be there. 198 00:12:49,380 --> 00:12:50,730 And here it is. 199 00:12:52,320 --> 00:12:56,400 This is coming from the array, by the way, because there is here and this one is here, the number 200 00:12:56,400 --> 00:12:58,290 one zero one, two and three. 201 00:12:58,620 --> 00:13:04,500 OK, now what we can do, we can do a for loop here in the for loop is Yeah. 202 00:13:05,910 --> 00:13:06,810 Let's do a for loop. 203 00:13:07,230 --> 00:13:19,080 So for I'm going to say for I equals to zero I is less than span array length. 204 00:13:19,080 --> 00:13:25,470 Remember we can just grab it the length like that in I plus plus we need to increment this counter in 205 00:13:25,470 --> 00:13:26,080 here. 206 00:13:26,940 --> 00:13:36,650 OK, so here I was Spanaway I'm going to say that you should see and style background to blue. 207 00:13:37,500 --> 00:13:39,630 I don't know, hexadecimal belli for blue. 208 00:13:39,630 --> 00:13:40,470 That's why I'm doing this. 209 00:13:40,830 --> 00:13:45,240 So I expect this, I expect this to work. 210 00:13:45,540 --> 00:13:45,950 Right. 211 00:13:46,380 --> 00:13:48,420 Let's see what's happening now. 212 00:13:48,420 --> 00:13:56,490 It's not working because Spanaway style we should put it like so we need to access each individual. 213 00:13:56,490 --> 00:13:58,160 This is like splintery of zero. 214 00:13:58,170 --> 00:13:59,820 So it will loop a couple of times. 215 00:14:00,360 --> 00:14:02,040 Here it is now. 216 00:14:02,040 --> 00:14:04,050 It's working right now. 217 00:14:04,050 --> 00:14:05,640 It's working also strange behavior. 218 00:14:05,640 --> 00:14:07,620 Is that so when I when I hover it. 219 00:14:07,890 --> 00:14:08,280 Yeah. 220 00:14:08,400 --> 00:14:08,700 Nice. 221 00:14:08,880 --> 00:14:18,450 So we know that is working, but you need to put it here because this will be span, span, array of 222 00:14:18,460 --> 00:14:20,490 zero next cycle. 223 00:14:20,490 --> 00:14:26,520 It will be span array of one and things like that. 224 00:14:26,520 --> 00:14:28,800 That's why we are we are able to do this. 225 00:14:29,250 --> 00:14:30,030 How cool is this. 226 00:14:30,030 --> 00:14:32,130 Now that is for the first part. 227 00:14:32,460 --> 00:14:39,280 Now for the second part, let's get the Elida light elements so we just get the well. 228 00:14:39,720 --> 00:14:48,350 We just get get this ally element, because in I we do have to do list element, right. 229 00:14:48,930 --> 00:14:55,700 And we do have to do the to do list element title and we have trash inside each and every ally. 230 00:14:55,920 --> 00:14:59,280 So we're going to do something else here. 231 00:15:00,600 --> 00:15:04,550 But the way we're going to do it is first time we're going to comment. 232 00:15:04,560 --> 00:15:06,630 This one I'm going to refresh here. 233 00:15:06,630 --> 00:15:08,690 I just don't want any anything there. 234 00:15:08,880 --> 00:15:17,270 And the second way is to get to get inside the elai with tax. 235 00:15:18,000 --> 00:15:24,180 Now, how we can do this, OK, war ally tax. 236 00:15:25,500 --> 00:15:27,350 And I'm going to say, OK, document. 237 00:15:28,770 --> 00:15:29,940 They are very similar, by the way. 238 00:15:29,940 --> 00:15:35,460 Guys get element by tag, name and the tag name. 239 00:15:36,090 --> 00:15:38,040 What you think I will put it here, Ally. 240 00:15:38,880 --> 00:15:40,800 So I'm just going to cons a lot. 241 00:15:41,810 --> 00:15:42,600 I like that. 242 00:15:43,110 --> 00:15:43,440 Let's see. 243 00:15:43,440 --> 00:15:51,880 What's happening in here is I got the same like HMO collection of elai to do list element. 244 00:15:51,900 --> 00:15:52,980 How cool is this. 245 00:15:53,100 --> 00:15:54,780 And we can just go like this. 246 00:15:54,990 --> 00:15:55,890 We can still access it. 247 00:15:56,220 --> 00:15:59,200 We can still access each individual element. 248 00:15:59,460 --> 00:16:08,820 OK, now, for example, we can access the number two or number three, same way number two number through 249 00:16:08,820 --> 00:16:10,170 to give me the number three. 250 00:16:10,170 --> 00:16:11,880 So if I go here, here it is. 251 00:16:12,060 --> 00:16:13,860 If I go here, it will select the other one. 252 00:16:14,130 --> 00:16:17,220 And what else we need we can do here. 253 00:16:17,490 --> 00:16:29,850 Now we can Pantex if we want to, for example, one and see, OK, text content and you need to write 254 00:16:29,850 --> 00:16:31,260 some descriptive content here. 255 00:16:31,410 --> 00:16:34,770 Updated with that name. 256 00:16:36,180 --> 00:16:39,480 How cool is this updated with that name. 257 00:16:39,510 --> 00:16:40,050 Here it is. 258 00:16:40,490 --> 00:16:40,910 Right. 259 00:16:41,880 --> 00:16:49,440 And what else we need to do, we need to do for example, I'm trying to think to give you one more thing 260 00:16:50,850 --> 00:16:52,740 and that one more thing will be. 261 00:16:53,790 --> 00:16:54,900 So this is number two. 262 00:16:55,860 --> 00:16:58,640 The number three will be worth the number three will be. 263 00:16:58,650 --> 00:17:01,380 I'm just going to copy it from here and I'm going to change it. 264 00:17:01,380 --> 00:17:07,130 Number three is get so we're going to use all selecter, right? 265 00:17:07,380 --> 00:17:18,030 So example of this will be number three and it will be an example of query selecter. 266 00:17:21,350 --> 00:17:24,690 Oh, no, maybe it's a good idea. 267 00:17:24,710 --> 00:17:27,950 Not bad idea to put it in the a lot. 268 00:17:28,430 --> 00:17:34,480 So you should do it like this everywhere, you know, missing Querrey, right. 269 00:17:37,340 --> 00:17:43,430 So if I refresh, I should have seen that one query selector, also query selector all they're all similar, 270 00:17:43,790 --> 00:17:45,560 but you will see what will happen. 271 00:17:45,860 --> 00:17:47,510 The query selector all. 272 00:17:47,510 --> 00:17:53,120 I'm just going to say, OK, I'm just gonna comment this one and I'm going to name it Ueli items. 273 00:17:56,280 --> 00:18:02,130 So you guessed it, I just want to select the U.S., I mean, the all of the line items, Duckman, 274 00:18:02,130 --> 00:18:03,150 get elements. 275 00:18:03,300 --> 00:18:07,650 So here I'm just going to remove this one unless equerry selecter all. 276 00:18:07,880 --> 00:18:12,060 And I'm just going to say, OK, Elai, now let's see what's happening. 277 00:18:15,520 --> 00:18:21,590 Let's refresh here is now, instead of a collection, we have Notley's with the full length of four. 278 00:18:22,030 --> 00:18:26,520 Now what is powerful with the Notley's, we don't have to convert it error. 279 00:18:26,530 --> 00:18:27,740 We can straight use it. 280 00:18:27,970 --> 00:18:31,270 So this step is keeping this step where it is. 281 00:18:32,020 --> 00:18:33,920 No idea of where I put the step. 282 00:18:34,840 --> 00:18:35,210 Yeah. 283 00:18:35,290 --> 00:18:40,000 That this step is skipping this step because it's not it's Notari. 284 00:18:40,000 --> 00:18:41,640 It's not HDMI collection. 285 00:18:41,920 --> 00:18:45,910 No, we can do this. 286 00:18:45,910 --> 00:18:51,550 Do it for let's see what's what's holding there for I equals to zero. 287 00:18:52,370 --> 00:19:00,670 I will be smaller than other items and still we can access the link property here and I plus plus we 288 00:19:00,670 --> 00:19:02,290 need to increase the selector. 289 00:19:02,530 --> 00:19:04,240 No other items. 290 00:19:05,860 --> 00:19:10,750 Let's change the background to each and every other item. 291 00:19:11,470 --> 00:19:13,810 So style background. 292 00:19:14,260 --> 00:19:16,810 And I need this one to be yellow. 293 00:19:18,010 --> 00:19:19,390 I don't know how it will turn out. 294 00:19:21,080 --> 00:19:25,030 It is ok actually can't see it. 295 00:19:25,450 --> 00:19:31,510 It looks like the entire block this but actually it's not the entire block because we don't have any 296 00:19:31,510 --> 00:19:34,000 margin, we don't have any padding, we don't have anything. 297 00:19:34,000 --> 00:19:38,500 Now just going to copy this line and you will be able to see. 298 00:19:38,680 --> 00:19:44,380 So I'm just going to add margin here and at margin of ten or fifteen pixels. 299 00:19:44,770 --> 00:19:47,470 Doesn't matter how much it is now. 300 00:19:47,470 --> 00:19:52,090 You see that I'm accessing each and every individual ally inside our unordered list. 301 00:19:52,390 --> 00:19:53,140 How cool is this? 302 00:19:53,320 --> 00:19:57,280 Also, let's change a color of 303 00:19:59,530 --> 00:20:03,400 all the font and I'm going to put it blue. 304 00:20:03,940 --> 00:20:04,750 We're going to save it. 305 00:20:04,900 --> 00:20:05,920 I'm going to refresh. 306 00:20:06,700 --> 00:20:07,630 Let's put it red. 307 00:20:09,880 --> 00:20:10,250 Oops. 308 00:20:12,090 --> 00:20:14,100 Red, because we do have a need. 309 00:20:14,180 --> 00:20:21,730 Yeah, that's Luke's way better now you know how to do all of this, right? 310 00:20:22,990 --> 00:20:24,470 So what else? 311 00:20:24,640 --> 00:20:25,100 That's it. 312 00:20:25,360 --> 00:20:26,320 We don't need this pork. 313 00:20:27,100 --> 00:20:31,470 Now, you know how to get multiple elements using good elements by the class name. 314 00:20:31,660 --> 00:20:37,660 So if you do want a global scope, you can do it like this if you want to locally, that all of the 315 00:20:37,660 --> 00:20:40,190 elements inside the U.S., you can do it like this. 316 00:20:40,210 --> 00:20:41,370 Now, you know how to do that. 317 00:20:41,650 --> 00:20:46,450 Now, also, you can get by their attacks in the same thing can apply. 318 00:20:46,450 --> 00:20:49,150 Also, we learn how to for a loop. 319 00:20:50,050 --> 00:20:52,390 There is a foreach actually, but we haven't covered that. 320 00:20:52,390 --> 00:20:53,650 I'm not going to show it to you now. 321 00:20:53,860 --> 00:21:02,620 And actually, we can convert the HDMI collection to an array using this array that form in the last 322 00:21:02,620 --> 00:21:04,160 one is a query selector. 323 00:21:04,360 --> 00:21:09,860 So in this square, selectively selecting all of the allies, we just putting in the variable you items. 324 00:21:10,330 --> 00:21:16,030 Now the thing is that how powerful is this is this will return to Notwist in Notley's of length for. 325 00:21:16,090 --> 00:21:18,280 So there are four elements inside the receiver. 326 00:21:18,560 --> 00:21:21,400 However, each and every one in there is going there. 327 00:21:21,400 --> 00:21:21,810 Right. 328 00:21:22,930 --> 00:21:25,360 And you can actually see what's happening inside. 329 00:21:25,390 --> 00:21:25,750 Right. 330 00:21:26,080 --> 00:21:32,320 You can just be more productive and see what is there and yeah. 331 00:21:32,710 --> 00:21:33,370 Be more. 332 00:21:33,760 --> 00:21:39,700 How do I say more like investigators find things now please. 333 00:21:39,790 --> 00:21:43,710 Like the video share subscribe put a five star review. 334 00:21:43,720 --> 00:21:45,790 I'm just joking but I'll read you whatever you want. 335 00:21:45,790 --> 00:21:49,330 But it will mean if you it will mean a lot if you. 336 00:21:49,720 --> 00:21:50,110 Yeah. 337 00:21:50,260 --> 00:21:51,310 If you like my content. 338 00:21:51,310 --> 00:21:52,390 So thank you very much. 339 00:21:52,450 --> 00:21:58,630 We learn a single selector now we learn a multiple selectors and here we will see what we'll do next. 340 00:21:59,620 --> 00:22:01,290 Take care and I'll see you next time.