All language subtitles for 008 Pseudo-classes_en

Let's now learn

about something called pseudo classes.

Now, pseudo class sounds very strange,

but it's actually pretty straightforward.

And as an example,

let's try to style the first list elements

different from the other ones.

So we have this list here and this list.

And so, as I just said,

let's try to style the first element

of each of the lists differently.

for example, by making them bold.

So this element and this element

now the straightforward way

of doing this would be to add a class to each of them

and then style them.

Right?

So let's actually try that first example.

So here is one list.

So let's add a class of

first

li,

and then let's do the same

to the other lists that we have up here.

And then back in or CSS,

let's select all the elements with the first li class.

And then remember to make text bold.

We use font-weight

set to bold,

and indeed, here we are.

So now this one is bold and this one,

but we can actually do better than this.

So instead of doing this manually,

we can actually have CSS automatically figure out,

which is the first li element inside of a container.

So let's actually do that and I will still keep

the classes in the HTML, just so we keep it as a reference,

but now let me show you how we can actually do it better.

So we start by using li,

which will basically select all the li elements,

but then we use a pseudo class

and we start a pseudo class

by writing a colon

like this.

And then to one that we're interested in here

is called first

dash child.

And that's it.

And now here, we can say font weight and set it to bold.

So let's see.

And indeed it worked now they are back to being bold.

So we basically changed our selector here

and added a pseudo class to it.

And what this first child pseudo class does

is that it will select an li element,

or actually it was select all the li elements that are

the first child elements of its parent elements.

And so that is exactly the case right here and right here.

Right?

So this li element here

is the first-child element of its parent.

So in this case, the Ol element,

and therefore this selector

that we wrote here will target that element.

And the exact same thing is too

for this other list down here.

Okay.

So let's try another one again, li.

and then we also have one called the last-child.

Until lets make it italic,

so font style

and set it to a italic.

And indeed, now the last one became italic.

So both here

and both here

because again,

both of them are li elements that are now the last-child

inside of its parent container.

Next up, we can actually also target a specific child.

So for example, the third or the second child.

So for that, we use the nth-child pseudo class,

and then here we actually need to write parenthesis

like this so we can specify which of the child that we want.

So let's say we want the second child

to have a color of

red.

So using just a coded color name here,

let's see.

And indeed here it is.

Or if we tried the third one,

then indeed it would be the third one here

and here as well.

And even better than that,

is that we can actually use some keywords here.

so we can write odd.

And now all the odd elements will be red.

So element number one, then number two,

or actually number three, and here it's element number one,

number three, and number five.

And if there were more,

then it would select number seven, nine, eleven

and so on and so forth.

And of course, if we can do odd,

then we can also do even

so that we'll then select a number two,

four, six, eight

and so on and so forth.

So you see number two

and here two and four.

Right?

So this technique is quite useful

for example, to style tables,

which oftentimes have like alternating background colors.

So I'm sure you have seen that somewhere.

And so it's very helpful for that this technique here.

Now let's actually comment out this property here

because we don't want or text here to be red

actually in a final page.

Alright, So this was just to show you

everything that we can do here.

Now finally, let me clear up a common misconception

that there is around the pseudo classes.

So let's say that we wanted to select

the first paragraph element that's inside of the article.

So let's check that out here in our markup.

So inside of the article,

the first paragraph would basically be this one here.

Right?

So let's see what we can do here.

So what I just said

is basically

article and then p.

so that's the descendant selector.

Right?

So selecting a paragraph that's inside of the article

and now selecting the very first of that.

So first-child.

And now let's say we want the color.

To be red in this one,

but as we reload this and check out our page,

you see that nothing happened.

So no paragraph actually turned red.

So again, the misconception is that this selector here

should have selected the first p element

inside of the article.

And so this would be this one.

Right?

So as we just saw before this paragraph is in fact,

the first paragraph inside of the article however,

this is not how the first child pseudo class actually works.

Instead, what CSS will do is to select a p element

that is actually the first child of the article.

Alright?

So the p element is the first p element

inside of the article,

but it is not the first child of article.

The first child of article is actually header.

Right?

It is not a paragraph.

And so therefore this selector here does not work in a way

that maybe we might think it would.

So this would only work if a paragraph,

would actually be to first element of the article.

So let's do that.

So if we save now then indeed we get some red paragraph.

So now this paragraph is the first-child of the article.

And so therefore now our selector applies.

Alright?

now let's see the end of our article.

So it ends here

and we can see that a paragraph is actually

the last-child of the article element.

Right?

And so what would work is this.

So let's see our result.

And indeed, now this text is the red.

And so it makes sense.

Right?

Again this worked

because it is a p element inside of the article

and it is indeed the last-child of that article.

And so therefore this selector then applied

and did exactly what it should do.

So basically what this means is that

when we mix multiple elements inside of a parent element,

then the pseudo classes don't work really well.

They are however perfect for situations like this one,

where all the child elements are the same.

So in a list like ul or ol all the child elements

are supposed to be li and so the does pseudo class,

like first-child, last-child or nth-child work perfectly.

Alright.

And this is how you work with these pseudo classes.

Now, the pseudo classes that we just learned about

are all about matching the existing HTML structure.

However, there are also other types of pseudo classes.

And so let's use some of them in the next video

to finally style or hyperlinks.