1 00:00:01,750 --> 00:00:07,420 Welcome back, my friends, to another lecture today where we are going to do is we are going to continue 2 00:00:07,420 --> 00:00:09,840 working with where we stop. 3 00:00:09,850 --> 00:00:11,350 Actually, we are today. 4 00:00:11,350 --> 00:00:17,920 We are going to do we are going to grab the elements by idea or we can use the second way using the 5 00:00:17,920 --> 00:00:19,290 square we select. 6 00:00:19,540 --> 00:00:25,660 So the question we selected is a much newer and much powerful faster, if you want to say. 7 00:00:25,990 --> 00:00:30,060 But we're going to use the get the elements by now. 8 00:00:31,270 --> 00:00:33,600 These are a single element selector. 9 00:00:33,610 --> 00:00:37,870 We have a multiple element selector where we can select multiple elements. 10 00:00:38,110 --> 00:00:42,350 And when I say single element selector, we have to show you. 11 00:00:42,670 --> 00:00:51,920 So we have here, for example, I don't have anything with ID actually, so I'll just search it. 12 00:00:52,240 --> 00:00:53,320 ID nope. 13 00:00:53,320 --> 00:00:53,800 I don't have. 14 00:00:54,390 --> 00:00:56,720 I did page content but I'm not happy with that. 15 00:00:56,950 --> 00:01:05,800 Now I'm going to create here inside a car each one and I'm going to say, OK, a single element. 16 00:01:06,190 --> 00:01:10,870 Selectors, very cute in here. 17 00:01:10,870 --> 00:01:15,070 I'm going to give you the class let's put it project title. 18 00:01:17,090 --> 00:01:28,280 And I'd just title right and refresh, see what's happening here in there now we if we have what's called 19 00:01:28,280 --> 00:01:34,160 single element selectors because we have the same idea or same class name somewhere here, look at this, 20 00:01:34,580 --> 00:01:38,300 for example, we do have this I have the same to do list. 21 00:01:38,300 --> 00:01:38,590 Right. 22 00:01:38,750 --> 00:01:39,650 Same classman. 23 00:01:39,920 --> 00:01:43,190 So it's going to grab only the first one or it's going to grab the first. 24 00:01:43,430 --> 00:01:48,370 Whereas the first occurrence of this idea or class is going to grab that element. 25 00:01:48,380 --> 00:01:49,400 It's not going to go on. 26 00:01:49,400 --> 00:01:52,770 The second one is not going to go in the third one and so forth. 27 00:01:52,820 --> 00:01:55,370 So for now, I hope you understand. 28 00:01:55,370 --> 00:01:57,570 That's why it's called single element selectors. 29 00:01:57,860 --> 00:02:06,410 Now, what we can do, we can use get out of them and bidi in that it's been there for a very long time. 30 00:02:06,420 --> 00:02:09,720 So what we are going to do, just going to create a couple of variables here. 31 00:02:09,960 --> 00:02:11,120 Now one more thing. 32 00:02:11,120 --> 00:02:16,760 I'm just going to comment this one control and for Slash, I'm going to copy it. 33 00:02:16,760 --> 00:02:22,220 Actually, I'm going to put it here and I'm going to say at one and I'm going to create additional F 34 00:02:23,120 --> 00:02:26,890 actually I'm going to copy of this one and rename it moves. 35 00:02:27,110 --> 00:02:28,090 I don't want to delete it. 36 00:02:28,280 --> 00:02:28,720 Come on. 37 00:02:30,500 --> 00:02:33,920 So I'm going to rename it to one. 38 00:02:34,100 --> 00:02:34,670 That's it. 39 00:02:34,790 --> 00:02:38,330 Now inside, I'm just going to delete everything, so I hope it's going to work. 40 00:02:38,480 --> 00:02:39,340 Let's test it out. 41 00:02:39,350 --> 00:02:42,680 Alert working. 42 00:02:45,340 --> 00:02:48,820 Remember, you need to link it in your index, that HTML. 43 00:02:50,130 --> 00:02:52,880 Here it is, it's working now. 44 00:02:53,230 --> 00:02:53,600 Good. 45 00:02:54,070 --> 00:02:54,900 Don't need this one. 46 00:02:54,910 --> 00:02:55,950 I don't need this one. 47 00:02:55,960 --> 00:02:58,030 Actually, maybe I did take that one. 48 00:02:59,500 --> 00:03:01,750 OK, we get golden now. 49 00:03:01,780 --> 00:03:06,370 Know, what we need to do is actually to get the elements. 50 00:03:06,520 --> 00:03:11,320 So I know that we have the element with ID right here. 51 00:03:12,760 --> 00:03:17,380 And I'm going to refresh actually actually I'm going to use this one now. 52 00:03:18,570 --> 00:03:21,130 OK, now what else we need to do? 53 00:03:22,300 --> 00:03:27,460 I'm going to create here a couple of variables and we can use those variables and I'm going to say title 54 00:03:27,460 --> 00:03:29,720 the variable title is the first one that we're going to use. 55 00:03:29,980 --> 00:03:35,560 So what we are going to do is we are going to grab the the title. 56 00:03:35,890 --> 00:03:42,710 So the title equal document, not get Elamine by the second one. 57 00:03:42,820 --> 00:03:44,410 There is a class name as well. 58 00:03:44,440 --> 00:03:47,470 We're going to, but there is that element by deep. 59 00:03:47,530 --> 00:03:52,870 And now what we need to do is just to specify the name of the title. 60 00:03:53,350 --> 00:04:00,760 So if I do kinds of locks, let's lock this one title and let's see what's happening. 61 00:04:01,750 --> 00:04:02,190 Right. 62 00:04:02,530 --> 00:04:03,310 That's what's happening. 63 00:04:03,940 --> 00:04:07,360 I'm going to refresh actually nothing's going to happen and nothing here. 64 00:04:07,870 --> 00:04:10,700 I'm just going to do the inspect here to cancel. 65 00:04:10,940 --> 00:04:13,840 It really is the project I is they're just going to inspect here. 66 00:04:13,840 --> 00:04:17,370 What's happening to see how is working is OK. 67 00:04:17,380 --> 00:04:17,710 Yeah. 68 00:04:17,710 --> 00:04:19,630 Here it is the title. 69 00:04:19,630 --> 00:04:22,240 Is there no one else we can do here. 70 00:04:22,240 --> 00:04:28,030 So we select actually the each one that where the title is. 71 00:04:28,270 --> 00:04:33,030 But that is not like what we want to achieve for example. 72 00:04:33,370 --> 00:04:40,480 So what we want to achieve is pretty much grab the project title, grab the title, let's grab the grab 73 00:04:40,480 --> 00:04:42,870 the idea and the project. 74 00:04:42,880 --> 00:04:48,170 And so what I'm going to say here, I'm just going to create an additional variable here, idee. 75 00:04:48,430 --> 00:04:54,940 And what we can do is I can just copy this bad guy here and dot I. 76 00:04:54,940 --> 00:05:01,600 D Now if I can block this one and say, OK, project is. 77 00:05:04,550 --> 00:05:15,590 Project idea is plus not like that, and I'm going to do the hash one and concatenate now actually. 78 00:05:18,930 --> 00:05:23,710 This should be here, Heidi, right now, let's refresh and see what's happening. 79 00:05:24,030 --> 00:05:30,000 The project is titled Very Good, and that's what we are getting. 80 00:05:31,590 --> 00:05:32,850 Where is this one, actually? 81 00:05:34,510 --> 00:05:39,500 Yeah, for some reason, OK, here is no doesn't matter. 82 00:05:39,880 --> 00:05:47,740 I was thinking where the title of is the title so I couldn't see it, but because we have a console 83 00:05:47,740 --> 00:05:51,630 here, an inspector, and that's why it's shifting things up a little bit. 84 00:05:51,640 --> 00:05:55,510 Now, we can also get the class name if we want to. 85 00:05:55,510 --> 00:05:56,350 So how we can do this. 86 00:05:56,500 --> 00:05:59,350 So I'm going to create additional variable here. 87 00:05:59,560 --> 00:06:02,320 See a name that stands for class name. 88 00:06:02,530 --> 00:06:11,830 And what we can do is actually we can grab it here, but instead of grabbing it by grabbing it class 89 00:06:11,830 --> 00:06:12,090 classmate. 90 00:06:12,400 --> 00:06:15,610 Now I'm just going to copy the same here and I'm going to print it out. 91 00:06:16,630 --> 00:06:23,910 Sini and the project class is and I'm going to put it here. 92 00:06:23,940 --> 00:06:27,560 See, that's it. 93 00:06:27,640 --> 00:06:29,530 Pretty much in the project, actually. 94 00:06:29,530 --> 00:06:32,060 Class name is different than title is project title. 95 00:06:32,320 --> 00:06:33,910 Let's see if it's going to work. 96 00:06:35,860 --> 00:06:36,200 Yeah. 97 00:06:36,220 --> 00:06:39,140 The Project class is a project title. 98 00:06:39,340 --> 00:06:39,820 Very good. 99 00:06:39,830 --> 00:06:44,390 So now you know how to grab Yagiz in, grab the class name. 100 00:06:44,530 --> 00:06:48,190 Now look what we are doing here. 101 00:06:48,190 --> 00:06:52,320 We are just repeating ourselves with the document to get Elliman by the title. 102 00:06:52,330 --> 00:06:52,680 Right. 103 00:06:52,930 --> 00:06:56,580 So we can just make this one a little bit shorter. 104 00:06:56,860 --> 00:07:02,410 So how we can do this, because we already have this title here. 105 00:07:02,410 --> 00:07:03,190 It's Stort. 106 00:07:03,840 --> 00:07:09,040 I'm just going to show it to you how we can do it like this. 107 00:07:11,780 --> 00:07:19,640 Guess you're just going to say class name, and this is the number one way to number two, because it's 108 00:07:19,640 --> 00:07:23,430 already been Stort, it's already been stolen. 109 00:07:23,500 --> 00:07:23,980 What happened? 110 00:07:23,990 --> 00:07:26,020 It's already been stored there in the title. 111 00:07:28,070 --> 00:07:33,530 So what we can do is C name equals title, dot class name. 112 00:07:36,470 --> 00:07:42,170 And instead of bringing here this, we can just print it out the. 113 00:07:43,910 --> 00:07:46,580 Yeah, actually we need to remain the same. 114 00:07:46,580 --> 00:07:46,990 That one. 115 00:07:47,210 --> 00:07:47,630 Right. 116 00:07:54,010 --> 00:07:57,470 It is a project that it's giving me the same result. 117 00:07:57,760 --> 00:07:59,270 So that is pretty much it. 118 00:07:59,920 --> 00:08:03,090 OK, what else we need to what's happening with this one? 119 00:08:03,100 --> 00:08:06,610 I'm just going to close the Firefox now. 120 00:08:06,610 --> 00:08:09,990 We're getting the same result and we just our code is a little bit shorter. 121 00:08:10,000 --> 00:08:11,080 We can do the same thing. 122 00:08:11,380 --> 00:08:13,480 We can achieve the same thing with the idea. 123 00:08:13,630 --> 00:08:22,770 It seemed like this idea equals Tyto that idea and he should give me the same output here. 124 00:08:23,200 --> 00:08:24,020 She didn't change it. 125 00:08:24,190 --> 00:08:24,670 Very good. 126 00:08:24,910 --> 00:08:28,580 Now you know how to grab it and you don't repeat yourself, right? 127 00:08:28,720 --> 00:08:32,250 So don't repeat yourself dry. 128 00:08:32,410 --> 00:08:33,700 That's how they call it dry. 129 00:08:33,720 --> 00:08:34,630 Don't repeat yourself. 130 00:08:34,630 --> 00:08:38,680 Don't repeat the code a couple of times and that will be better. 131 00:08:38,710 --> 00:08:45,430 Now, we can just we don't want to use just to grab the kids in class. 132 00:08:45,430 --> 00:08:55,150 Names we want to achieve here is also sometimes we can add styles by by getting their ideas or by getting 133 00:08:55,150 --> 00:08:56,420 the element by. 134 00:08:56,730 --> 00:09:02,410 Right now, for example, I'm going to create additional variable here called text online. 135 00:09:03,330 --> 00:09:04,600 You probably guessed it. 136 00:09:04,600 --> 00:09:06,020 What it's going to happen next. 137 00:09:06,020 --> 00:09:13,690 The line, it will be equal to Tyto, so I'm not going to grab here document douget get element by idea. 138 00:09:14,050 --> 00:09:16,480 Actually I'm just going to put it first and I'm going to comment. 139 00:09:16,990 --> 00:09:21,460 And so here what we can say style. 140 00:09:21,700 --> 00:09:23,950 We can apply style by the way guys. 141 00:09:24,100 --> 00:09:31,480 So styles are fixed, aligned and probably and didn't put this one here. 142 00:09:31,480 --> 00:09:36,970 So you can say a line here because it's the same with this one line in the line. 143 00:09:37,540 --> 00:09:40,630 So text the line and I'm going to put it equal to that. 144 00:09:40,630 --> 00:09:42,430 Should be equal to, for example, center. 145 00:09:42,670 --> 00:09:48,550 I just want this here this to be positioned in the center. 146 00:09:48,550 --> 00:09:49,810 So let's hope it's going to work. 147 00:09:50,020 --> 00:09:51,190 It is working now. 148 00:09:51,190 --> 00:09:59,980 If you go to the inspector and if you click, where is it in a container, I think it's inside the container. 149 00:09:59,980 --> 00:10:01,360 No, where is it? 150 00:10:01,960 --> 00:10:02,740 Here is the title. 151 00:10:02,890 --> 00:10:06,610 Now I see that the style is at it with the center right. 152 00:10:06,700 --> 00:10:11,050 So if I unstick this one it will return to the previous value. 153 00:10:11,140 --> 00:10:11,570 Right. 154 00:10:12,940 --> 00:10:13,560 Very good. 155 00:10:13,750 --> 00:10:16,960 Now we can add styles, but this is not the way we should do. 156 00:10:17,170 --> 00:10:19,690 We can add those styles with CSX. 157 00:10:19,690 --> 00:10:19,950 Right. 158 00:10:19,960 --> 00:10:26,410 We don't do this properly, but for some things, yes, we can also we can change of color if we want. 159 00:10:26,710 --> 00:10:29,500 So I'm going to say, OK, style color. 160 00:10:32,050 --> 00:10:33,340 I just want to keep things tidy. 161 00:10:33,340 --> 00:10:34,480 That's why I just put it here. 162 00:10:34,480 --> 00:10:35,950 An additional one now. 163 00:10:36,310 --> 00:10:38,410 Just going to show you that I don't want to use this one. 164 00:10:38,410 --> 00:10:42,390 I'm just going to say title because I have this document that gets element body. 165 00:10:42,640 --> 00:10:43,810 I want to repeat myself. 166 00:10:43,810 --> 00:10:44,080 Right. 167 00:10:44,300 --> 00:10:49,120 And I'm going to say style color and we can apply a color if we want. 168 00:10:49,120 --> 00:10:55,450 Now you can apply hexadecimal values like I don't know what's for rent, but yeah, you can apply hexadecimal. 169 00:10:55,450 --> 00:10:58,210 But I'm going to just put it here straight right now. 170 00:10:58,210 --> 00:10:59,230 I'm just going to refresh. 171 00:10:59,380 --> 00:11:00,100 And here it is. 172 00:11:00,280 --> 00:11:03,880 The read in this is they're very good. 173 00:11:03,880 --> 00:11:04,600 How cool is this? 174 00:11:04,600 --> 00:11:08,680 If I take this one, it will go back to the boring old black color. 175 00:11:08,950 --> 00:11:11,230 Now we know how to apply the color. 176 00:11:11,650 --> 00:11:18,730 So what we actually need now is we can also put up adding, I'm just going to show you a couple of things. 177 00:11:19,750 --> 00:11:23,920 Stop adding in here. 178 00:11:23,920 --> 00:11:28,900 It will be style padding instead of color. 179 00:11:28,990 --> 00:11:34,330 And we can just put here REM's pixels, percentage, whatever you want to put it here. 180 00:11:34,450 --> 00:11:34,840 Right. 181 00:11:35,710 --> 00:11:37,360 Then pixels is going to be good. 182 00:11:37,660 --> 00:11:40,360 And let's be clear, this one here on top. 183 00:11:43,180 --> 00:11:43,670 Mm hmm. 184 00:11:44,090 --> 00:11:45,430 Let's see Banning's apply. 185 00:11:46,000 --> 00:11:48,080 Here it is, you can see how it's shifting. 186 00:11:48,910 --> 00:11:49,520 Very good. 187 00:11:49,780 --> 00:11:51,870 Now you know how to apply padding, what else we can do. 188 00:11:51,880 --> 00:11:54,790 We can do a lot of things that we can do with scissors. 189 00:11:54,940 --> 00:11:55,900 That's not the goal. 190 00:11:55,900 --> 00:12:04,960 But, yeah, now we can do a background if we want style background in the background. 191 00:12:04,990 --> 00:12:05,650 Let's put it like 192 00:12:09,550 --> 00:12:12,760 three, three, three and see what's happening in style back. 193 00:12:13,480 --> 00:12:18,540 Just got to put this like this style back every single word. 194 00:12:19,750 --> 00:12:21,820 Here is the background here style in here. 195 00:12:21,820 --> 00:12:23,170 It is our job. 196 00:12:23,230 --> 00:12:29,610 You can even put that what you do right style is bad, like a dark gray. 197 00:12:30,290 --> 00:12:36,450 Now we can also what we mostly times use this one. 198 00:12:36,460 --> 00:12:41,310 We can just we just can't make it unless we can do things to disappear. 199 00:12:41,320 --> 00:12:47,670 So we can just put this one, the H1 tag to display none and we can just return it. 200 00:12:47,830 --> 00:12:51,900 That is sometimes the goal of what we can do with the JavaScript. 201 00:12:51,910 --> 00:12:56,740 We can just hide things, put them visible again on mouse, click on some events. 202 00:12:56,740 --> 00:12:57,030 Right. 203 00:12:57,190 --> 00:13:01,060 But I'm going to show it to you so how we can do it now. 204 00:13:01,180 --> 00:13:05,350 We can just say style and display. 205 00:13:05,900 --> 00:13:07,510 So we need to do the display. 206 00:13:07,540 --> 00:13:07,900 Right. 207 00:13:08,230 --> 00:13:10,420 And this actually we're going to using our diski. 208 00:13:11,680 --> 00:13:12,420 That's good. 209 00:13:12,430 --> 00:13:17,520 So I'm going to say style display to none and I'm going to say style visibility here. 210 00:13:19,480 --> 00:13:23,560 This is a variable only you can just and I'm going to copy it here. 211 00:13:24,130 --> 00:13:25,450 Oh actually no. 212 00:13:27,310 --> 00:13:28,210 Should be. 213 00:13:28,390 --> 00:13:30,760 I'm just going to go back here style back. 214 00:13:31,480 --> 00:13:33,340 So she put it in the wrong place. 215 00:13:33,520 --> 00:13:40,660 So style is ability and let's style visibility copy and save it. 216 00:13:41,470 --> 00:13:46,590 Now we don't have it because here if you do watch it display to none. 217 00:13:46,600 --> 00:13:50,050 So if I don't think that one is there right now, I can. 218 00:13:51,310 --> 00:13:51,940 All right. 219 00:13:51,940 --> 00:13:52,480 This one. 220 00:13:52,780 --> 00:13:59,290 But put it style block nice so I can override this one and just put it back where it was. 221 00:13:59,920 --> 00:14:02,470 How cool is this, how powerful is this. 222 00:14:02,470 --> 00:14:05,710 So we can just use a lot of tricks here. 223 00:14:05,860 --> 00:14:12,100 Now we can also add text so we can add content using text content or in our text. 224 00:14:13,240 --> 00:14:16,540 Let's put this one at text. 225 00:14:18,730 --> 00:14:25,270 I'm going to say in our inner HDMI and the other one is text content. 226 00:14:27,400 --> 00:14:32,320 So there is a two ways the interaction with you, you will see why we can use the both of them. 227 00:14:32,650 --> 00:14:46,180 Know what I'm going to say here, add content and see title the text content and we can apply a new. 228 00:14:46,180 --> 00:14:47,290 So what. 229 00:14:47,290 --> 00:14:49,630 This will do whatever we put here. 230 00:14:50,140 --> 00:14:52,240 So it will find title. 231 00:14:52,240 --> 00:14:58,330 Don't be confusing to find this one title with the document by the so it will find where is this. 232 00:14:58,630 --> 00:15:02,650 And inside here we do have a single element selection. 233 00:15:02,650 --> 00:15:03,310 Can you see this. 234 00:15:03,640 --> 00:15:10,570 There is now I just want to change that one to say OK, so what else we can write here. 235 00:15:12,280 --> 00:15:16,030 New title is a simple and add content. 236 00:15:16,030 --> 00:15:19,810 Even if I don't put it here, it will work as a new variable. 237 00:15:20,490 --> 00:15:20,970 It is. 238 00:15:20,980 --> 00:15:23,620 We have a new title right in. 239 00:15:23,650 --> 00:15:24,310 There you go. 240 00:15:24,310 --> 00:15:26,380 Now you can achieve the same same thing. 241 00:15:26,770 --> 00:15:27,970 Let's put a space here. 242 00:15:28,240 --> 00:15:31,650 You can achieve the same, the same thing with enraged you. 243 00:15:34,690 --> 00:15:36,970 Now new title one. 244 00:15:37,300 --> 00:15:40,150 Let's put it something else too. 245 00:15:40,150 --> 00:15:42,220 We can see that it's working. 246 00:15:42,580 --> 00:15:46,090 So that is how we can do now. 247 00:15:46,510 --> 00:15:51,130 We can also add a code with this inner HTML. 248 00:15:51,460 --> 00:15:55,240 That's why this inner HTML, we can add some new tax. 249 00:15:55,240 --> 00:15:57,400 It's not just for putting a text here. 250 00:15:58,420 --> 00:16:04,480 This is also in our tax sorry, not in our HMO. 251 00:16:04,750 --> 00:16:11,980 So there is a one way that we know sometimes we don't just put the text here, we just want to put here 252 00:16:11,980 --> 00:16:12,910 some HTML. 253 00:16:13,150 --> 00:16:14,110 So how we can do that. 254 00:16:14,260 --> 00:16:16,540 There is a one very interesting. 255 00:16:16,870 --> 00:16:23,410 It's called AB HTML that's it's called inner HTML. 256 00:16:23,860 --> 00:16:24,370 That's it. 257 00:16:24,550 --> 00:16:26,170 Now I'm going to add content. 258 00:16:26,170 --> 00:16:27,060 I'm going to put it here. 259 00:16:28,570 --> 00:16:35,860 So what we want to do is we just want to create a div class inside here. 260 00:16:36,130 --> 00:16:38,140 So I'm just going to open the up this one. 261 00:16:38,470 --> 00:16:42,390 So I'm just going to create a diff class and. 262 00:16:42,600 --> 00:16:47,690 Inside here, I just want to create a deep class with new title in Spanish inside, right. 263 00:16:49,560 --> 00:16:50,450 Let's put it like that. 264 00:16:51,840 --> 00:16:53,670 Have an inner HTML. 265 00:16:56,390 --> 00:17:02,450 Very you and what I'm can do, I'm going to say, OK, I'm going to define your class and I can define 266 00:17:02,450 --> 00:17:03,370 even the class name. 267 00:17:03,380 --> 00:17:08,660 So make sure to use double quotations here because it's not going to work with a single one and a new 268 00:17:08,660 --> 00:17:09,140 title. 269 00:17:12,980 --> 00:17:16,550 And also, you can put a spanner here. 270 00:17:18,600 --> 00:17:19,740 If you want to. 271 00:17:21,540 --> 00:17:23,030 So let's hope it's going to work. 272 00:17:23,460 --> 00:17:24,610 Now I'm going to refresh. 273 00:17:25,050 --> 00:17:25,580 Here it is. 274 00:17:25,590 --> 00:17:28,320 The title is Dear, but let's see what's happening. 275 00:17:28,350 --> 00:17:31,260 So if I go inspected, here it is. 276 00:17:31,500 --> 00:17:34,460 There is this new title with the title. 277 00:17:35,100 --> 00:17:39,180 It's very powerful how we can add even what we can do. 278 00:17:39,480 --> 00:17:43,580 We can just create here a class, another class. 279 00:17:43,590 --> 00:17:46,530 Actually, I'm going to put a style and I'm going to say font color. 280 00:17:47,610 --> 00:17:54,150 I'm going to say color or let's say font size 50 pixels. 281 00:17:54,840 --> 00:17:57,450 So that what we do, it will do. 282 00:17:57,600 --> 00:18:00,710 It will increase this font size to 50 pixels. 283 00:18:00,750 --> 00:18:01,200 Here it is. 284 00:18:03,000 --> 00:18:04,320 There's a 50 pixels. 285 00:18:04,350 --> 00:18:05,870 There is additional new title. 286 00:18:06,150 --> 00:18:12,800 This is how you can add in our HTML tags, not just simple text you can add. 287 00:18:12,810 --> 00:18:14,030 That's right. 288 00:18:14,040 --> 00:18:15,510 And that is very powerful. 289 00:18:15,510 --> 00:18:19,650 So you can use this one even in your years in your projects. 290 00:18:21,760 --> 00:18:26,890 So this is how far I want to go with the document, get anything by it. 291 00:18:27,640 --> 00:18:32,930 Now, the second way is to use the more modern it's called Querrey Selector. 292 00:18:33,310 --> 00:18:44,500 So what we can do here is we can say just I'm going to add new variable called query, query title. 293 00:18:45,250 --> 00:18:48,130 We can just achieve the same thing right now. 294 00:18:48,130 --> 00:18:51,790 Query title that will be equal to. 295 00:18:51,970 --> 00:18:53,330 So you guess what? 296 00:18:53,390 --> 00:18:55,510 So we need we don't use documenters. 297 00:18:55,510 --> 00:18:58,360 Get out of my body but we use documental get Elliman. 298 00:19:00,070 --> 00:19:03,390 No, not get element that query selector. 299 00:19:03,390 --> 00:19:03,670 Right. 300 00:19:03,790 --> 00:19:08,420 So the query selector if we can just achieve this by two ways. 301 00:19:08,710 --> 00:19:17,860 Now if we want to query selector to take to get by tigi, we use hash in the title right now. 302 00:19:17,860 --> 00:19:22,480 If we cause a log return is probably an object. 303 00:19:23,710 --> 00:19:24,190 Mm hmm. 304 00:19:24,910 --> 00:19:25,600 So. 305 00:19:28,960 --> 00:19:36,910 Yeah, it is it written this one titled Project title, text the line, we turn everything. 306 00:19:36,940 --> 00:19:41,400 So if I uncommented that one, I mean, if I take that one, there is nothing there. 307 00:19:41,440 --> 00:19:41,780 Right. 308 00:19:42,370 --> 00:19:43,920 So I'm just going to put it like that. 309 00:19:44,260 --> 00:19:50,230 Now, one other way that you can do query selecter, you can find the same achieve things, you can 310 00:19:50,230 --> 00:19:54,500 achieve the same things if you use the class. 311 00:19:54,760 --> 00:20:02,350 So how we can get the class now we know that we the query select, we use hash to sorry to get the title, 312 00:20:02,680 --> 00:20:04,710 but we can achieve the same thing with the class. 313 00:20:04,720 --> 00:20:08,060 But we use DOT in the name of the class project. 314 00:20:10,450 --> 00:20:16,600 I think title was project title and it should give us the same result. 315 00:20:16,900 --> 00:20:18,380 Here it is, the same result. 316 00:20:18,400 --> 00:20:26,400 Now what we have done with the get element by idea, we can also do a little bit of styling here. 317 00:20:26,680 --> 00:20:33,160 Now we I do have these are unordered plays with a lot of elai elements inside. 318 00:20:33,160 --> 00:20:33,450 Right. 319 00:20:33,700 --> 00:20:37,180 So what we can do is actually we can access those elements. 320 00:20:37,510 --> 00:20:43,150 But because he's a single selector to access the first one, remember, I have the allies, they have 321 00:20:43,150 --> 00:20:44,230 the same class name. 322 00:20:44,470 --> 00:20:52,390 So what we can do is say, OK, let's say query title. 323 00:20:52,930 --> 00:20:58,540 Maybe Querétaro is not appropriate, but I'm going to use it like this. 324 00:20:59,080 --> 00:21:07,960 So the name the class name of these bad boys here the is to do list element. 325 00:21:08,320 --> 00:21:08,740 Right. 326 00:21:08,890 --> 00:21:11,500 So I'm just going to let me stay there. 327 00:21:11,710 --> 00:21:13,280 So to do these elements. 328 00:21:13,280 --> 00:21:14,560 So I'm going to do OK. 329 00:21:14,740 --> 00:21:20,760 I just want to style first the background. 330 00:21:21,040 --> 00:21:25,110 I just got a different background and I'm going to use hexadecimal three five. 331 00:21:26,320 --> 00:21:33,670 Look, what will happen now is it's going to match the first one, although I do have C when I select 332 00:21:33,670 --> 00:21:37,240 this one, it's like they do have this one everywhere in that line. 333 00:21:37,240 --> 00:21:40,570 But because a single query selector, it will select the first one. 334 00:21:40,840 --> 00:21:42,820 Now you can select the first one. 335 00:21:43,030 --> 00:21:43,750 The second one. 336 00:21:43,750 --> 00:21:44,380 The third one. 337 00:21:44,380 --> 00:21:48,610 The last one using using pseudo classes. 338 00:21:49,030 --> 00:21:51,370 So I'm going to show you how now. 339 00:21:53,160 --> 00:22:02,430 We can just so we can just use here, we can just pointed out, we can say, OK, I just want to select 340 00:22:02,760 --> 00:22:06,660 Last Ally and that is how we can do the last child. 341 00:22:06,810 --> 00:22:10,150 So if you took my other courses, this will be very easy. 342 00:22:10,170 --> 00:22:15,960 Now, I'm just going to put here some different color I don't want I do have that one color, so let's 343 00:22:15,960 --> 00:22:16,780 put a green. 344 00:22:18,630 --> 00:22:30,660 So I'm hoping this ally very I think even u l l I will work very good because lies inside this u l right. 345 00:22:30,900 --> 00:22:33,420 So we can use that one as well also. 346 00:22:33,420 --> 00:22:36,990 But I'm just going to remove it because it doesn't look very natural to me. 347 00:22:37,290 --> 00:22:47,730 So we can also use a A.H. child here in the studio classes. 348 00:22:47,730 --> 00:22:54,780 So any child number two, we need to specify which child you need to see. 349 00:22:54,780 --> 00:22:59,460 OK, this one, it should be orange, orange, red. 350 00:23:00,090 --> 00:23:02,190 And actually which one is the second child? 351 00:23:02,550 --> 00:23:05,400 You will see this one and we can access the third one. 352 00:23:09,230 --> 00:23:10,310 This will be blue. 353 00:23:11,630 --> 00:23:20,540 How cool is this that is working also what we also what we can do, we can just change the text if we 354 00:23:20,540 --> 00:23:20,900 want to. 355 00:23:20,900 --> 00:23:28,310 Some of them, for example, I don't want to last child to have this extra course lectures. 356 00:23:28,490 --> 00:23:29,440 So how we can do this? 357 00:23:29,450 --> 00:23:31,050 I'm just going to copy this one. 358 00:23:31,790 --> 00:23:38,030 No, actually, I'm going to copy this one with Green and I'm going to use the same text content here 359 00:23:38,300 --> 00:23:42,200 instead of I'm going to remove this, I'm going to say text content. 360 00:23:42,460 --> 00:23:43,960 I'm going to put a new content here. 361 00:23:44,240 --> 00:23:50,630 So this is added with query selector 362 00:23:53,660 --> 00:23:56,090 and I'm going to refresh now and I hope it's going to work. 363 00:23:56,270 --> 00:23:57,860 This is added with a query selector. 364 00:23:57,890 --> 00:23:58,720 How cool is this? 365 00:23:59,000 --> 00:24:04,050 Now you know how to get Elliman by their idea or using a query selector. 366 00:24:04,070 --> 00:24:05,140 This is a single element. 367 00:24:05,150 --> 00:24:07,790 That's why we can just change one here. 368 00:24:07,870 --> 00:24:09,890 It's not going to select everything here. 369 00:24:10,220 --> 00:24:11,560 And by the way, why it's not OK. 370 00:24:11,570 --> 00:24:18,410 Yeah, maybe because when we added when we had it, we remove that thing from how to call it. 371 00:24:19,040 --> 00:24:19,460 Yeah. 372 00:24:19,460 --> 00:24:20,930 We remove this class. 373 00:24:21,080 --> 00:24:21,610 That's why. 374 00:24:21,920 --> 00:24:23,750 So thank you for watching. 375 00:24:23,750 --> 00:24:27,050 I hope you understand what we're trying to do right here. 376 00:24:27,260 --> 00:24:35,110 But what we can do, we get Elliman by the essentially we can do the same thing with queries like that, 377 00:24:35,120 --> 00:24:39,680 of course, led to the newer, newer version and newer way of how to do it. 378 00:24:39,830 --> 00:24:44,420 You don't have to define all of these variables if you want, but it's good to have it here. 379 00:24:44,720 --> 00:24:47,450 Now, this is for today's class. 380 00:24:47,600 --> 00:24:54,080 So how we can select the items and using elements selector. 381 00:24:54,410 --> 00:24:59,990 And in this case, in this lecture, we just check the single element selector or. 382 00:25:00,200 --> 00:25:01,510 Yeah, we can do that. 383 00:25:01,520 --> 00:25:03,920 So pretty much done. 384 00:25:04,490 --> 00:25:08,030 We can also select the classes that we will live with the next time. 385 00:25:08,060 --> 00:25:11,120 So thank you very much and I hope to see you in the next lecture.