WEBVTT

00:00:05.680 --> 00:00:12.790
It this video we're going to learn how to select a ASML elements using Jay Querrey.

00:00:13.410 --> 00:00:21.120
So we're going to use the same source code that includes our three diverse Facebook Apple and Microsoft

00:00:21.130 --> 00:00:21.340
.

00:00:21.540 --> 00:00:22.590
OK.

00:00:23.070 --> 00:00:31.500
OK so first of all we're going to need to include our query scripts so using the Google CDMA so that

00:00:31.500 --> 00:00:35.380
goes in the head section of the web page.

00:00:35.410 --> 00:00:35.820
All right.

00:00:35.830 --> 00:00:42.410
And now we're going to start writing some scripts there using Jay Querrey.

00:00:42.420 --> 00:00:47.380
So first of all we are going to include all the scripts in the ready function.

00:00:47.610 --> 00:00:56.700
So we are going to use the simplified version that's using only the dollar followed by the function

00:00:57.330 --> 00:00:58.270
.

00:00:58.650 --> 00:00:59.050
So

00:01:03.900 --> 00:01:13.470
OK so the first Alexa we can use here is a selector that will select all a shemale elements and the

00:01:13.470 --> 00:01:25.830
syntax for that is going to be there for select and then we get to put the selector inside quotes and

00:01:26.210 --> 00:01:29.540
to select all the elements we're going to need a star.

00:01:30.170 --> 00:01:35.870
OK so now we see lexing all the elements and then are going to need a dot followed by the action.

00:01:35.880 --> 00:01:44.790
So the function we going to be using here is going to be CSSA because we want to change the font size

00:01:45.000 --> 00:01:50.380
to 16 pixels for all the elements on the page.

00:01:50.700 --> 00:01:58.410
So the way to do that is by using the CSSA function and we're going to put two parameters there.

00:01:58.410 --> 00:02:06.030
So the first parameter is font size which is the same syntax we would have used if we change the font

00:02:06.030 --> 00:02:07.990
size in the style tag.

00:02:08.310 --> 00:02:09.400
OK.

00:02:09.510 --> 00:02:15.990
And then we need to use a comma to separate the parameters and the second one is going to be the value

00:02:16.110 --> 00:02:19.670
of the property which is going to be 16 pixels.

00:02:19.780 --> 00:02:20.400
OK.

00:02:20.700 --> 00:02:28.050
OK so if we refresh the page Well we don't see anything because we are already 16 pixels but if we do

00:02:28.050 --> 00:02:29.330
something big there.

00:02:29.500 --> 00:02:32.350
So all the elements are going to be really big.

00:02:32.730 --> 00:02:38.070
OK so that's the syntax.

00:02:38.730 --> 00:02:43.680
Selecting all the ASML elements of the web page.

00:02:43.720 --> 00:02:54.000
Now let's say we want to change the styling of all the paragraphs we want the text align to be censored

00:02:54.010 --> 00:02:54.400
.

00:02:54.930 --> 00:03:02.190
So now we want to select all the paragraphs on a page so we need the dollar sign followed by the Seligson

00:03:02.210 --> 00:03:02.570
.

00:03:02.820 --> 00:03:07.850
And in our case when I select all the paragraphs and the syntax for that is be OK.

00:03:08.210 --> 00:03:15.770
And then if want to change the text align to center again we're going to use the SS function or method

00:03:16.380 --> 00:03:18.780
and we're going to need to prohibit that.

00:03:18.780 --> 00:03:28.260
So the first one is going to be the text aligned and the second one which is the volume the property

00:03:29.760 --> 00:03:32.710
is going to be Center.

00:03:33.310 --> 00:03:34.710
All right.

00:03:35.160 --> 00:03:39.900
Let's try it and see fine we can see those all our programs.

00:03:39.910 --> 00:03:42.110
Now they are censored.

00:03:42.540 --> 00:03:45.480
OK.

00:03:45.630 --> 00:03:55.200
Now if we want to select all the paragraphs that are direct childs of dips.

00:03:55.470 --> 00:04:07.940
OK the syntax is going to be diff and then graden sign and then paragraph.

00:04:07.960 --> 00:04:13.860
Ok so if we Commines the first one we refresh again we can see.

00:04:13.880 --> 00:04:22.510
All these ones they are centered because all of them they are directs a childs of dips.

00:04:22.590 --> 00:04:23.340
OK.

00:04:23.760 --> 00:04:30.720
Also if we want to style paragraphs these are savings of thieves.

00:04:30.930 --> 00:04:31.620
OK.

00:04:32.040 --> 00:04:40.790
So we need to use the carrot sign ok like that.

00:04:40.830 --> 00:04:43.100
Now if you check.

00:04:44.930 --> 00:04:45.440
OK.

00:04:45.660 --> 00:04:47.220
So it is not working.

00:04:47.430 --> 00:04:53.750
The reason why is because we don't have any paragraphs that are siblings of.

00:04:53.790 --> 00:04:54.770
In our case.

00:04:54.950 --> 00:05:01.200
So if you want that we need to add another paragraph next to the div so that it becomes it's sobering

00:05:01.280 --> 00:05:01.540
.

00:05:01.820 --> 00:05:03.740
So let's try something right after Apple

00:05:09.580 --> 00:05:11.880
so let's refresh the page.

00:05:11.890 --> 00:05:19.840
Now we can see that this paragraph which is cybering of these days now has called the text property

00:05:19.840 --> 00:05:21.910
change to standard.

00:05:21.910 --> 00:05:23.620
All right.

00:05:24.740 --> 00:05:32.690
OK so we get selects all the paragraphs that are descendants of apes.

00:05:32.800 --> 00:05:38.340
So the syntax is Dave followed by a space followed by paragraph.

00:05:38.380 --> 00:05:46.540
So now all the paragraphs that are descendants of Dave begin to be styled using the text align property

00:05:46.560 --> 00:05:46.860
.

00:05:47.250 --> 00:05:53.470
So you can see that all these walls which are inside divs they had their their property of takes a line

00:05:53.680 --> 00:05:54.780
change you centered.

00:05:55.060 --> 00:06:00.820
OK so now we're going to move to something else so now we want to select elements by ID.

00:06:01.120 --> 00:06:04.650
So the syntax for that is.

00:06:05.230 --> 00:06:14.560
So we need the dollar sign followed by the selector and we are going to need the number sign for all

00:06:14.600 --> 00:06:17.520
the by the name of the ID.

00:06:17.700 --> 00:06:18.330
OK.

00:06:18.910 --> 00:06:24.900
So in our case we want to select the element of ID grates which is this one.

00:06:25.450 --> 00:06:29.850
And then we need to specify the action.

00:06:29.860 --> 00:06:33.000
So in our case we want to try something different.

00:06:33.040 --> 00:06:42.400
We want to change the background color of these elements to some other color So let's say the syntax

00:06:42.460 --> 00:06:47.230
is background color exactly as we find in the styling section.

00:06:47.410 --> 00:06:47.860
And

00:06:51.820 --> 00:06:54.460
let's use the color picker

00:06:58.940 --> 00:07:00.850
of orange for example.

00:07:01.210 --> 00:07:03.230
OK let's see.

00:07:03.280 --> 00:07:05.550
We can see that's the span.

00:07:05.560 --> 00:07:06.710
Great.

00:07:06.840 --> 00:07:08.470
Just change to this color.

00:07:08.650 --> 00:07:09.490
OK.

00:07:10.090 --> 00:07:20.190
Now if we want to select elements by glass so let's add another paragraph to Facebook.

00:07:21.670 --> 00:07:29.530
So it's going to be let's call it over to let's give it a glass

00:07:32.350 --> 00:07:33.400
of orange.

00:07:33.500 --> 00:07:34.080
OK.

00:07:34.230 --> 00:07:38.880
Now we're going to select elements of glass orange.

00:07:39.000 --> 00:07:39.630
OK.

00:07:39.960 --> 00:07:43.990
So this elixir.

00:07:44.590 --> 00:07:52.510
So basically we need a dot then followed by the name of the glasses exactly the same thing that we would

00:07:52.500 --> 00:07:57.970
use in the styling section to refer to elements of glass orange.

00:07:58.030 --> 00:08:04.480
And then we're going to do same thing we use the CSA function and then we want to change the background

00:08:04.480 --> 00:08:07.850
color as well to orange.

00:08:07.850 --> 00:08:11.520
So it's orange.

00:08:12.560 --> 00:08:13.820
OK.

00:08:14.470 --> 00:08:19.900
OK so now we can see that's a change to background color or orange.

00:08:19.960 --> 00:08:26.890
Let's change the color of grates so that we don't mix up the properties.

00:08:26.920 --> 00:08:28.460
Let's go for another color.

00:08:28.620 --> 00:08:31.450
Let's try this results.

00:08:31.490 --> 00:08:46.470
All right now we want to select dips of glass blue box and change their fonts family to us on set.

00:08:46.800 --> 00:08:54.700
So so again so a dollar sign and then followed by the selects and in our case.

00:08:54.890 --> 00:09:02.160
So we want diffs of glass Bluebook So we need to start with beef and then that's followed by the name

00:09:02.160 --> 00:09:03.560
of the class blue box.

00:09:03.580 --> 00:09:04.440
OK.

00:09:04.540 --> 00:09:11.270
And we want to change the font family so this is also this can be done using the SS method.

00:09:11.620 --> 00:09:16.130
So the first part I would say is going to be the phones probably.

00:09:16.750 --> 00:09:24.200
And then the second barometer is going to be the name of the phones probably what is on sale.

00:09:25.540 --> 00:09:36.310
OK so let's try that and see and then we can see that the dev of glass blue box is fundamentally changed

00:09:36.330 --> 00:09:36.480
.

00:09:36.610 --> 00:09:39.040
OK.

00:09:39.180 --> 00:09:42.490
Now we can try something else.

00:09:42.490 --> 00:09:52.090
Now we want to select the paragraph paragraphs which are first childs of another similar elements.

00:09:52.620 --> 00:09:53.490
OK.

00:09:53.670 --> 00:10:00.340
So for example if one selects the first paragraph reads child of the div here is going to be the first

00:10:00.340 --> 00:10:02.160
one which is Facebook is great.

00:10:02.320 --> 00:10:12.390
OK well before we do that let's just add another paragraph to the Facebook Dave quali paragraph 3.

00:10:13.520 --> 00:10:14.220
OK.

00:10:14.380 --> 00:10:19.400
Also let's add something to the Apple Dave.

00:10:19.600 --> 00:10:20.050
So we're going to

00:10:26.640 --> 00:10:38.680
get a paragraph with a link and it's saying this is a link or another one here.

00:10:38.950 --> 00:10:42.500
This is another link.

00:10:42.610 --> 00:10:43.200
OK.

00:10:43.210 --> 00:10:47.430
So now we wanted to select the first child paragraphs.

00:10:47.430 --> 00:10:56.430
So the syntax is going to be dollar sign followed by dyslexic in our case is going to be barograph colon

00:10:57.310 --> 00:11:01.460
and then first child OK.

00:11:01.970 --> 00:11:06.620
And we want to change text decoration for example to underline.

00:11:06.660 --> 00:11:14.110
So we want all the first paragraphs which are child of another element to have a six day creation delay

00:11:14.130 --> 00:11:14.270
.

00:11:14.350 --> 00:11:18.430
So the function again is says that it will just

00:11:21.820 --> 00:11:27.310
use exactly the same syntax as in styling so text decoration.

00:11:28.410 --> 00:11:31.280
And we are setting that to a deadline.

00:11:31.910 --> 00:11:37.730
We now we can see that's all the first child paragraphs they are underlined.

00:11:37.860 --> 00:11:42.660
OK we can do the same thing with Lost Child paragraphs.

00:11:42.700 --> 00:11:50.830
So if you duplicate that and we just change first child to a lost child can you come in that's when

00:11:52.600 --> 00:11:54.790
we can see that last child.

00:11:54.790 --> 00:11:57.420
Now they are not alike.

00:11:57.560 --> 00:12:00.550
And in Micro's of debuts only one paragraph.

00:12:00.550 --> 00:12:02.380
So it is also a lost child.

00:12:02.530 --> 00:12:03.940
So that's why it's like.

00:12:04.040 --> 00:12:08.520
Know if you want to do the same thing for both first child and last child.

00:12:08.710 --> 00:12:13.610
So there is one way of combining selected H.M. elements.

00:12:13.810 --> 00:12:24.490
So all we need to do is select both the first child and the last child by separate separating them using

00:12:24.490 --> 00:12:27.150
the comma inside the records.

00:12:27.180 --> 00:12:33.720
So the first child might be a lost child.

00:12:34.670 --> 00:12:41.930
And then we can get rid of these line and now we will see that's both first trials and loss trials.

00:12:42.630 --> 00:12:44.610
They are a delight.

00:12:45.900 --> 00:12:47.910
OK.

00:12:48.240 --> 00:12:50.190
Because you know