WEBVTT

00:00.940 --> 00:07.480
Now, I'm going to make a note here again, if we move on to the next lesson, you should know that

00:07.810 --> 00:10.360
an ID needs to be unique.

00:10.360 --> 00:13.000
So if you go and inspect the elements here.

00:14.300 --> 00:19.160
We can see that we have 2H2 elements with the ID of red.

00:19.190 --> 00:27.380
So we can see they're both red, but it's not really valid HTML because an ID needs to be unique.

00:28.970 --> 00:33.770
So if I go ahead and check the jQuery again and say dollar sign.

00:34.610 --> 00:36.530
Read the text.

00:37.690 --> 00:48.820
We only get the first element in the HTML document because jQuery is built so that IDs there is only

00:48.820 --> 00:49.840
one of those.

00:50.520 --> 00:51.830
So make sure.

00:51.840 --> 00:59.820
So this is just a little note for you to be aware of, because sometimes web developers do make mistakes

00:59.820 --> 01:05.700
and make multiple IDs with the same name, which you are not supposed to.

01:06.900 --> 01:13.290
But what if you want to have multiple elements and the web developer wants to have them in one style?

01:14.520 --> 01:17.580
Well, then you have something which is called classes.

01:17.580 --> 01:21.960
So if you move on to the next lesson, we have classes now.

01:22.320 --> 01:27.510
So you simply say H2 class is equal to read in the HTML.

01:28.160 --> 01:33.710
And then up in the CSS, we have a dot red instead of a hashtag red.

01:33.830 --> 01:37.340
So that is using a class and classes.

01:37.340 --> 01:41.420
That is fine when you have multiple elements with the same class.

01:43.200 --> 01:51.420
So if you go inside and make sure to inject jQuery and then you can say dollar sign with the dot, just

01:51.420 --> 01:57.540
like the CSS we had inside the file and say read and say dot text.

01:58.740 --> 01:59.400
We see.

01:59.400 --> 02:01.830
We now get both of the elements.

02:01.830 --> 02:03.840
Text with the red class.

02:05.890 --> 02:18.940
So that means that classes in HTML and CSS and also for CSS selector in jQuery have a dot in front and

02:18.970 --> 02:20.800
IDs have a hash tag.

02:21.520 --> 02:24.580
So classes are with a dot in front.

02:25.500 --> 02:26.400
Just like that.

02:26.400 --> 02:30.540
When we have multiple elements we want to select with the same class.

02:31.790 --> 02:34.070
You can also combine these things.

02:34.070 --> 02:39.380
You can combine it so that you have both a class and an element.

02:39.930 --> 02:47.430
If you click here on select an element to inspect it and hover over this red element, here you can

02:47.430 --> 02:49.950
see it says H2 dot Red.

02:50.130 --> 02:52.380
You can also use that selector in here.

02:52.380 --> 02:56.940
So we can say H2 dot red and say dot text.

02:57.180 --> 03:02.460
And then we have selected all of the H2 elements with the red class.