Instructor: Let's now learn
about something called pseudo-classes.
Now, pseudo-class sounds very strange,
but it is 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 list
that we have up here.
And then back in our 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 the one that we're interested in here
is called first-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 will 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 true
for this other list down here.
Okay?
So let's try another one, again li.
And then we also have one called last-child.
Okay, let's make it italic.
So, font style, and set it to 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 childs 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 and number three.
And here it's element number one, number three,
and number five.
And if there were more,
then it will select number 7, 9, 11, and so on and so forth.
And of course, if we can do odd, then we can also do even.
So that will then select number 2, 4, 6, 8,
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 our text here
to be red, actually, in the final page.
All right, 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 these 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.
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.
All right?
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 the way that maybe we might think it would.
So this would only work if a paragraph would actually
be the 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.
All right?
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 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 these 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, then this pseudo-class, like first-child,
last-child, or nth-child work perfectly.
All right, 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.