Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
In this video, we'll learn how to target first and last child elements with the :first-child and :last child structural pseudo-classes.
Quick Reference
Using :first-child and :last-child
To target the first child div element inside a parent, we can write:
div:first-child {
margin-left: 0;
}
To target the last li element in a list, we can write:
li:last-child {
float: right;
}
[NOISE] There's a lot more to CSS pseudo
classes than the link and
0:00
user action pseudo classes we covered back
in CSS basics.
0:05
CSS actually has a number of other helpful
pseudo classes,
0:11
beginning with structural pseudo classes,
that target elements according to
0:14
their position on the page and their
relation to other elements.
0:18
This is where we'll really start to see
the real power and
0:21
flexibility behind many of the more
advanced CSS selectors.
0:24
So let's continue with pseudo classes by
next taking a look at how to
0:27
target first and last child elements.
0:31
So first, we'll need to launch the new
workspace for this lesson.
0:34
And as we can see when we click the
preview button the page consists of
0:38
a simple list containing ten items.
0:42
Now if we take a look at the index dot
html file we can see that the markup for
0:45
that list is an un-ordered list containing
10 list items.
0:51
So we can say that all 10 of these LI
elements are children of this parent UL.
0:56
So now let's say we only want to target
and style the first item in our list.
1:02
So item one.
1:09
Well, we can use the first child
structural pseudo class to do just that.
1:10
So let's go back to our work space and
1:15
we'll bring up the style.css file right
here in the CSS directory.
1:17
And let's create that first child selector
by
1:23
first targeting an li element followed by
the first child pseudo-class.
1:25
So we'll say :first-child.
1:31
So like I said,
1:38
this selector will target the list element
that is the first child of its parent.
1:39
So in the rule, let's go ahead and give it
a background property.
1:45
And we're going to set the value to #52.
1:51
BAB3 and we're gonna set the color to
white all right.
1:56
So let's take a look.
2:01
We'll save our style.css file and
2:02
when we refresh the browser notice that
the first list item in our unordered
2:06
list is the only one with that aqua green
background color and the white text color.
2:11
So similar to the first child pseudo
class, the last child pseudo class.
2:16
Allows us to target an element that's the
last child of its parents.
2:22
So let's see how that works.
2:27
We'll go back to our style sheet and
2:28
let's change the first child selector to
last child.
2:30
So now when we go back to our list and
refresh the page.
2:36
Now we can see how the styles are applied
to the very last list item only.
2:40
And it doesn't matter how many list items
we add or remove from this unordered list,
2:45
the very last one will always have that
background color and white text color.
2:50
So, that's why these first and
2:54
last child selectors can come in really
handy when styling lists or navigations.
2:55
So, I'm gonna go back to our style sheet
and
3:01
set this selector back to the first child
pseudoclass.
3:03
I'm gonna go ahead and undo that.
3:07
So, when we take a look at it again, once
again,
3:09
that first list item, takes on those color
styles.
3:11
But now, let's say that we want to remove
this unnecessary border here.
3:14
In the last list item,
3:19
well now we know that we can easily do
that with a last child pseudo class.
3:21
No problem right?
3:25
So let's go back to our style sheet and
3:26
right beneath the first child selector we
just wrote.
3:28
Let's type li colon last dash child.
3:32
And, we'll add a border property and set
the value to none.
3:39
So now when we save our style sheet and
3:43
refresh the page we can see that the
bottom border is now gone.
3:45
This is really great because instead of
creating a separate class for
3:49
the first list item to add these colors.
3:53
We're creating a separate class to remove
the border here in the last list item.
3:56
We can do this in a more efficient way
with the first and
4:01
last child pseudo classes.
4:05
Now in a later lesson, we'll learn how to
target any combination of these child
4:07
elements, with more specific structural
pseudo classes.
4:12
You need to sign up for Treehouse in order to download course files.
Sign up