[NOISE] There's a lot more to CSS pseudo classes than the link and

user action pseudo classes we covered back in CSS basics.

CSS actually has a number of other helpful pseudo classes,

beginning with structural pseudo classes, that target elements according to

their position on the page and their relation to other elements.

This is where we'll really start to see the real power and

flexibility behind many of the more advanced CSS selectors.

So let's continue with pseudo classes by next taking a look at how to

target first and last child elements.

So first, we'll need to launch the new workspace for this lesson.

And as we can see when we click the preview button the page consists of

a simple list containing ten items.

Now if we take a look at the index dot html file we can see that the markup for

that list is an un-ordered list containing 10 list items.

So we can say that all 10 of these LI elements are children of this parent UL.

So now let's say we only want to target and style the first item in our list.

So item one.

Well, we can use the first child structural pseudo class to do just that.

So let's go back to our work space and

we'll bring up the style.css file right here in the CSS directory.

And let's create that first child selector by

first targeting an li element followed by the first child pseudo-class.

So we'll say :first-child.

So like I said,

this selector will target the list element that is the first child of its parent.

So in the rule, let's go ahead and give it a background property.

And we're going to set the value to #52.

BAB3 and we're gonna set the color to white all right.

So let's take a look.

We'll save our style.css file and

when we refresh the browser notice that the first list item in our unordered

list is the only one with that aqua green background color and the white text color.

So similar to the first child pseudo class, the last child pseudo class.

Allows us to target an element that's the last child of its parents.

So let's see how that works.

We'll go back to our style sheet and

let's change the first child selector to last child.

So now when we go back to our list and refresh the page.

Now we can see how the styles are applied to the very last list item only.

And it doesn't matter how many list items we add or remove from this unordered list,

the very last one will always have that background color and white text color.

So, that's why these first and

last child selectors can come in really handy when styling lists or navigations.

So, I'm gonna go back to our style sheet and

set this selector back to the first child pseudoclass.

I'm gonna go ahead and undo that.

So, when we take a look at it again, once again,

that first list item, takes on those color styles.

But now, let's say that we want to remove this unnecessary border here.

In the last list item,

well now we know that we can easily do that with a last child pseudo class.

No problem right?

So let's go back to our style sheet and

right beneath the first child selector we just wrote.

Let's type li colon last dash child.

And, we'll add a border property and set the value to none.

So now when we save our style sheet and

refresh the page we can see that the bottom border is now gone.

This is really great because instead of creating a separate class for

the first list item to add these colors.

We're creating a separate class to remove the border here in the last list item.

We can do this in a more efficient way with the first and

last child pseudo classes.

Now in a later lesson, we'll learn how to target any combination of these child

elements, with more specific structural pseudo classes.