WEBVTT

00:00.170 --> 00:06.680
So now we learned how to select elements, how to use the Chrome developer tools, selecting multiple

00:06.680 --> 00:10.640
elements and make our own NodeJS web scraper.

00:11.270 --> 00:16.540
Now it's time for me to introduce you to more CSS selectors inside of jQuery.

00:16.550 --> 00:24.230
And if we move on to the next lesson here to lesson three, we can now see there's three elements.

00:24.280 --> 00:28.010
H2 elements, but there is one that is a red color.

00:28.790 --> 00:36.470
And the reason why it's red is because it has the ID inside the HTML element that is called red.

00:36.770 --> 00:45.080
And we up here in the in the head element with the style, we have a red style with a color of red.

00:46.520 --> 00:51.770
So that is how web developers select elements using CSS.

00:51.800 --> 00:59.240
They can say that any H2 element should be a color of blue, or they can say This ID needs to have a

00:59.240 --> 01:00.830
color of so and so.

01:00.860 --> 01:04.280
That's how you style elements in HTML.

01:05.200 --> 01:13.000
But we can also use this to our advantage when we want to select elements inside jQuery or our web scraper.

01:13.180 --> 01:21.580
So we could say perhaps we only wanted the elements with this with this red color which has a red ID,

01:22.090 --> 01:26.800
So you would click on this element, inspect it, and you could see, Hey.

01:27.410 --> 01:32.510
This element has an ID of red and this is what I need to scrape.

01:32.990 --> 01:35.750
So then we could go on to the console.

01:36.600 --> 01:40.320
And make sure that you have jQuery injected in the site.

01:40.320 --> 01:42.480
So we click on the extension here.

01:43.160 --> 01:47.450
And then we can select an element with the ID of red.

01:47.570 --> 01:57.020
So to make sure that you select an ID, you put the the hashtag sign or the number sign in front, and

01:57.020 --> 01:59.060
then you have the ID here.

01:59.060 --> 02:01.130
So this is the ID of red.

02:01.670 --> 02:04.910
And then we can simply say dot text to see the text.

02:06.750 --> 02:15.210
So now we have selected only the H2 element with this ID rather than before when we could when we were

02:15.210 --> 02:18.480
selecting all of the H2 elements instead.

02:19.570 --> 02:26.350
So if you want to be more precise, when you select elements, that is one way to do it is to see what

02:26.350 --> 02:29.170
kind of ID does this element have.

02:29.410 --> 02:36.550
And so to select IDs in jQuery, we put a hashtag sign in front and then put the ID.

02:38.510 --> 02:44.660
Now let's move on to another CSS selector that exists, which is the class selector.