WEBVTT 00:00:06.850 --> 00:00:10.250 All right now we'll try something else. 00:00:10.260 --> 00:00:20.100 We try to select elements within a ref before we do that let's just refer to our links. 00:00:20.370 --> 00:00:31.070 We've got a couple of flings in the Apple Dave and it's good for the nature of their first one let's 00:00:31.080 --> 00:00:32.330 give it to the sheriff of 00:00:35.100 --> 00:00:38.730 Google dot com for example. 00:00:38.790 --> 00:00:39.540 The second one 00:00:42.750 --> 00:00:52.000 is give you the history of Microsoft for example. 00:00:53.550 --> 00:01:02.940 OK so now if you want to select all elements within a script all we need to do is use the dollar sign 00:01:03.760 --> 00:01:06.040 followed by the selector. 00:01:06.360 --> 00:01:13.110 And in our case we're going to need brackets inside the Iraqis we're going to write history. 00:01:13.430 --> 00:01:14.010 OK. 00:01:14.370 --> 00:01:16.880 And then we can decorate that as we want. 00:01:16.890 --> 00:01:22.980 So we can set for example the color for instance to Red 00:01:25.830 --> 00:01:29.160 I can see that both these links. 00:01:29.160 --> 00:01:32.230 They became red because they have beads. 00:01:32.630 --> 00:01:33.160 OK. 00:01:33.350 --> 00:01:38.190 This are a couple of items wanting Apple and wanting Microsoft. 00:01:38.510 --> 00:01:42.180 But it's odd one right after the Apple program. 00:01:42.690 --> 00:01:46.220 OK. 00:01:46.500 --> 00:01:49.280 So it's going to have it's going to be in an ordered list. 00:01:49.310 --> 00:01:50.580 OK. 00:01:51.060 --> 00:01:55.040 And let's have a few items there. 00:01:55.560 --> 00:01:58.720 So let's go for can me. 00:01:58.740 --> 00:02:03.640 So BMW Audi Mercedes. 00:02:04.900 --> 00:02:05.820 OK. 00:02:06.030 --> 00:02:12.120 It's the same list in the Microsoft Steve race after the program. 00:02:12.460 --> 00:02:13.110 OK. 00:02:13.320 --> 00:02:14.390 So now what do you want to do. 00:02:14.390 --> 00:02:17.010 We want to select the list items. 00:02:17.040 --> 00:02:18.530 That's our first child. 00:02:18.780 --> 00:02:19.600 OK. 00:02:19.650 --> 00:02:28.710 And give them a background color so we know use the dollar sign and then the Selecta is going to be 00:02:29.160 --> 00:02:32.440 a list item going on. 00:02:32.620 --> 00:02:38.060 First trial you got the same way we have done with the programs as our first child. 00:02:38.070 --> 00:02:38.690 OK. 00:02:38.830 --> 00:02:42.640 So then we will use the SS function. 00:02:42.930 --> 00:02:47.750 I will change the background color. 00:02:50.100 --> 00:02:53.310 OK let's use some background color for this 00:02:57.000 --> 00:02:59.210 case something like this. 00:03:00.640 --> 00:03:04.630 OK and we can see now that's all the list items. 00:03:05.080 --> 00:03:06.320 That's up first and the list. 00:03:06.330 --> 00:03:14.850 They took the green background color and we can do the same thing for the last child as well. 00:03:14.850 --> 00:03:18.410 So. 00:03:23.990 --> 00:03:24.780 OK. 00:03:25.050 --> 00:03:29.340 So both the first and the last child turned green. 00:03:29.340 --> 00:03:30.400 All right. 00:03:30.600 --> 00:03:33.540 OK let's see what happened here. 00:03:33.740 --> 00:03:34.000 OK. 00:03:34.000 --> 00:03:38.830 It's because of the of the heights which you said 200 pixels. 00:03:38.850 --> 00:03:46.460 So if we change the height of all elements out to avoid that problem it is Troy. 00:03:47.120 --> 00:03:48.820 And then we can see everything in sight. 00:03:49.370 --> 00:03:49.970 OK. 00:03:50.510 --> 00:03:51.990 So now we want to try something else. 00:03:51.990 --> 00:03:58.560 We want to select elements inside a table. 00:03:59.070 --> 00:04:05.690 So let's build a simple table in the Microsoft Steve. 00:04:06.180 --> 00:04:10.830 So let's pull this right after the an ordered list. 00:04:12.420 --> 00:04:16.850 OK so it's going to be a need table tag. 00:04:18.020 --> 00:04:20.690 OK. 00:04:20.720 --> 00:04:26.200 This first table. 00:04:27.420 --> 00:04:31.340 It's one two three. 00:04:31.920 --> 00:04:32.420 OK. 00:04:32.430 --> 00:04:35.350 So six years. 00:04:36.320 --> 00:04:37.060 So. 00:04:37.190 --> 00:04:40.830 So this is very simple. 00:04:40.910 --> 00:04:41.780 Don't make 00:04:47.700 --> 00:04:49.140 me model 00:04:52.650 --> 00:04:55.920 for example storage. 00:04:56.850 --> 00:05:00.160 That is Troy. 00:05:01.320 --> 00:05:03.780 You will the first one of all 00:05:07.980 --> 00:05:15.230 the iPhone for example the storage of 16 right 00:05:21.210 --> 00:05:22.140 is just copy paste 00:05:26.480 --> 00:05:29.980 . 00:05:30.490 --> 00:05:43.320 OK so now what we want to do we want to select all the even rows so all we need to do is use the dollar 00:05:43.320 --> 00:05:54.150 sign and then we select the he's going to be table row going on even and we want to change the background 00:05:54.150 --> 00:05:54.540 color 00:06:05.640 --> 00:06:06.930 background color. 00:06:07.420 --> 00:06:11.010 Let's change it to something. 00:06:11.460 --> 00:06:14.790 Because the color from here is go for that color. 00:06:14.970 --> 00:06:16.240 OK. 00:06:16.320 --> 00:06:17.290 And also. 00:06:17.290 --> 00:06:22.250 All right let's try this try and see if it works. 00:06:22.570 --> 00:06:27.150 Indeed it is working so you can see lots all the even rows so bear in mind as we start with. 00:06:27.240 --> 00:06:34.930 But with index zero all the time so that's 0 1 2 so we can see that 0 2 4. 00:06:35.050 --> 00:06:38.470 We all change the background color to this color. 00:06:38.550 --> 00:06:39.020 OK. 00:06:39.180 --> 00:06:40.270 We can do the same thing. 00:06:40.410 --> 00:06:49.140 We want rows using table row call on quad and we can pick up another color. 00:06:49.470 --> 00:06:51.270 So let's pick up for example for example 00:06:54.360 --> 00:06:58.290 something like this and let's see what we get. 00:06:58.650 --> 00:07:02.100 Now you can see that's all the wardrobe's we have changed. 00:07:02.340 --> 00:07:03.710 OK. 00:07:05.040 --> 00:07:06.660 All right. 00:07:06.660 --> 00:07:10.430 Now let's see how two selects inputs. 00:07:10.500 --> 00:07:17.000 So let's build another paragraph right out of the table and. 00:07:19.790 --> 00:07:22.290 OK I have something there. 00:07:22.290 --> 00:07:23.130 So what's next. 00:07:23.130 --> 00:07:27.450 Type your name and 00:07:32.220 --> 00:07:35.410 have some input there. 00:07:35.430 --> 00:07:40.690 So would I. 00:07:42.270 --> 00:07:43.940 OK. 00:07:44.580 --> 00:08:00.120 And also let's have a button or give you a submit some text so it's ok now. 00:08:00.340 --> 00:08:02.790 So if one accepts all the inputs of the page. 00:08:02.790 --> 00:08:09.140 So we need to sign the selector is going to be going on inputs. 00:08:09.690 --> 00:08:11.370 So this is a bit different. 00:08:11.490 --> 00:08:14.370 So we need a colon followed by about inputs. 00:08:14.370 --> 00:08:19.040 So this is for all inputs of the page and then we can change the background color. 00:08:19.050 --> 00:08:23.220 For example using the same as function then we can pick up a color 00:08:26.110 --> 00:08:27.480 from there. 00:08:28.380 --> 00:08:31.150 OK. 00:08:31.320 --> 00:08:35.600 Also we can do the same thing for the buttons of type submit. 00:08:35.850 --> 00:08:40.140 So the selector in this case is going to be called on submit. 00:08:40.340 --> 00:08:42.130 OK. 00:08:42.420 --> 00:08:44.310 It's a capital S.. 00:08:44.580 --> 00:08:45.440 OK. 00:08:45.450 --> 00:08:51.100 And let's also pick up a color for this. 00:08:51.880 --> 00:08:54.770 It's going something like this. 00:08:56.560 --> 00:08:58.980 OK we clear the table. 00:08:59.190 --> 00:09:03.780 And always try again. 00:09:08.010 --> 00:09:08.990 OK. 00:09:09.000 --> 00:09:14.080 So we can see the input there with the color and also the a person. 00:09:14.100 --> 00:09:15.400 So the color changed. 00:09:15.470 --> 00:09:17.070 Something is missing as well. 00:09:17.070 --> 00:09:24.020 One last thing we want to select all the dips that's include a table. 00:09:24.240 --> 00:09:25.260 OK. 00:09:25.780 --> 00:09:34.800 So so if what I do that's the syntax is going to be again a sign that the selector in this case is going 00:09:34.800 --> 00:09:37.250 to be all the divs. 00:09:37.320 --> 00:09:41.680 OK caught on and then hands. 00:09:42.270 --> 00:09:47.960 So every day of that has of course a table. 00:09:49.060 --> 00:09:49.830 OK. 00:09:49.830 --> 00:09:54.420 So we need this syntax and we can 00:09:59.580 --> 00:10:01.890 change the background again. 00:10:01.890 --> 00:10:04.640 Background color. 00:10:05.310 --> 00:10:08.520 OK. 00:10:09.940 --> 00:10:11.290 Let's change it to 00:10:19.420 --> 00:10:26.490 use this column for example. 00:10:26.520 --> 00:10:33.090 Now we can see that this Dave the microscope Dave which is the only one that includes a table and it's 00:10:33.560 --> 00:10:36.210 just changed its color to light blue. 00:10:36.240 --> 00:10:36.900 All right. 00:10:37.290 --> 00:10:44.070 So that's how we use select and we select a shemale elements using g equerry. 00:10:44.610 --> 00:10:46.580 We covered that quite a few examples here. 00:10:46.590 --> 00:10:53.430 There are other examples that we can't cover in here but so will see a little bit more in projects