"Enhancing a Simple PHP Application" was retired on December 19, 2016. You are now viewing the recommended replacement.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed CSS Selectors!
You have completed CSS Selectors!
Preview
:nth-child is a powerful structural pseudo-class because it targets child elements based on any position inside a parent.
Quick Reference
Using :nth-child
This targets the even numbered li elements in a parent:
li:nth-child(even) {
background: blue;
color: white;
}
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
[MUSIC]
0:00
Earlier, we learned how to target first
and
0:04
last child elements, with structural
pseudo-classes.
0:07
Next, we'll see how the nth-child
pseudo-class,
0:09
can target any combination of child
elements.
0:12
Nth-child is a useful and powerful
structural pseudo-class,
0:15
because it can target elements based on
any position, within a parent element.
0:18
And unlike the first and last child
pseudo-classes which only target first and
0:22
last child elements, we can target any
child element, or
0:26
any combination, of child elements.
0:29
So, we're going to revisit the simple list
from the previous stage,
0:32
to see how we're able to do that.
0:35
And again, we're not gonna add any class
or ID hooks to our elements.
0:37
These will be targeted dynamically, based
on where they're positioned,
0:41
in the unordered list.
0:45
So, first, let's go over to our style.css
file.
0:46
And we're going to create our nth-child
selector,
0:50
by first targeting list items with li.
0:53
Then we're gonna type a colon, followed by
nth-child, and a set of parentheses.
0:56
Make sure there aren't any spaces, in our
selector.
1:03
So, nth-child uses a function-like syntax,
1:06
that allows us to pass a value, in between
the parentheses.
1:10
And that value is referred to as an
argument.
1:14
Don't worry, we're not really arguing with
our CSS,
1:17
because that would be kind of mean.
1:19
Just think of it as a value we're passing,
1:21
to tell the selector, what elements to
target.
1:23
So, now inside these parentheses,
1:26
we're gonna declare how the element will
be selected.
1:28
Now one of the arguments we can pass, is
the keyword, odd or even.
1:31
And what they do is, they select every
other child element, based on an odd or
1:36
even position.
1:40
So, if we type even, as our argument,
1:41
we're specifying that we wanna target the
even numbered list items.
1:44
So, the second, fourth, sixth, eighth, and
so forth.
1:49
So, let's go back to our style sheet,
1:52
and we're gonna add some CSS properties in
our nth-child rule.
1:54
So, first, let's add a background
property.
1:57
And let's set the background color to
pound 52bab3,
2:00
our favorite aqua green color, in this
course.
2:05
And let's set the color value, to white.
2:09
All right, so we'll save our style sheet,
and when we take a look at the preview and
2:13
refresh, notice how the browser only
targets those even list items,
2:17
starting from the second one.
2:21
Then it goes on and targets the fourth,
sixth, eighth and tenth.
2:23
Now, if we go back and change our
argument, from even to odd,
2:27
when we take a look at it once again, now
it targets the odd numbered list items,
2:34
starting with the first list item, then
every other one.
2:38
But it doesn't stop there.
2:42
So, this is where it gets really cool,
because we're also able to use an integer,
2:44
as an argument, to target a particular
child.
2:48
When calculating the position of an
element,
2:51
inside its parent, the index numbering
starts at one.
2:53
So, for example, if we go back and pass
three, as our argument.
2:57
Once we save and refresh the browser,
notice how
3:03
the browser targets the third list item,
inside the parent unordered list.
3:06
Now, if we go back and replace it with
say, seven, well, now,
3:11
we can see that the seventh child is
selected, and so on.
3:15
But there's actually a lot more we can do.
3:20
What makes nth-child really powerful,
3:22
is when we use expressions to select a
particular combination of child elements.
3:25
Now, expressions may appear a little more
complex.
3:29
But, as we'll soon learn, they're not so
3:32
bad once we start experimenting with the
values.
3:34
So, our basic expression syntax, looks
something like this.
3:37
An plus b, now let's go over these values
mean.
3:40
So, the values a and b, are always
represented by numbers.
3:45
And the n value, never changes.
3:51
It's always the letter n.
3:53
So, starting from the right, the b value
here, is an offset value we use,
3:55
to tell the browser the first element we
want to select.
4:01
So, if we make this value three, this
means that the third list item,
4:04
will be the first one selected in our
list, and
4:08
it's gonna ignore all sibling list items
that come before it.
4:10
Then, the a value, tells the browser the
cycle of elements to select,
4:14
after that first one's selected.
4:19
So, if we make the a value two, this means
that the third list item,
4:21
will be selected first.
4:26
Then it will select every second list item
after that.
4:28
And as I mentioned, the n value doesn't
change in an expression.
4:32
We can think of n as a counter,
4:36
that indicates the a cycle value to the
browser.
4:38
So, in this expression, the n value will
tell the browser to
4:42
select every second list item, starting
from the third one in a list.
4:45
All right?
So, let's take a look.
4:50
So, we'll save our style sheet, and when
we take a look at the list in the browser,
4:51
we can see that the first list item
selected, is the third one.
4:56
And this was determined by our b value
here,
5:01
then it selects every second list item, as
indicated by the a value,
5:04
until there are no more list items to
select in our list.
5:08
Now, if you go back and change our
expression to something like 3n plus 4,
5:12
this means that the browser will target
the fourth list item first,
5:19
then every third one after that.
5:23
So, when we take a look at it once again,
now we see the fourth list item,
5:26
selected first, then every third one.
5:30
Cool.
5:34
Now, there are a couple things we can do
to shorten and
5:35
simplify our nth child expressions.
5:38
So, first, if our a value here is one, as
in, 1n plus 4,
5:40
we can actually omit the a value, because
it's the same as n plus 4.
5:45
And as we can see,
5:52
this one targets the fourth list item
first, then every other one after that.
5:53
Now, also, if the b value in our
expression is a zero,
5:58
as in 3n plus 0, then we can omit
6:03
the zero from our expression, as it's the
same as using the value, 3n.
6:09
And what this does is select every other
third child,
6:14
starting from the third one from the top.
6:18
Now, if the a and b values are the same,
so for instance,
6:21
if our expression is 3n plus 3, then we
can omit the b value,
6:24
because it's also the same as using 3n in
our expression.
6:29
Now finally, we're also able to use
negative values in our expressions, and
6:35
negative expressions come in handy,
6:39
when we need to select the first few items
in a list.
6:41
So, for example, say the first three items
in our list here, are featured items.
6:45
And we'll always need to target and style
them, a certain way.
6:51
Well, to do that, we can use the
expression, negative n, plus 3.
6:54
So, let's try to figure out what's about
to happen here.
7:02
We know that it's going to target the
third list item first,
7:05
as indicated by the b value.
7:09
And now we know that the n value by
itself, is the same as using 1n.
7:11
So, I'm gonna say that with the negative
value here,
7:18
instead of targeting every child element
that follows the third child,
7:21
it's gonna target every child element that
precedes it.
7:25
So, let's take a look.
7:28
Save the style sheet.
7:29
And when we refresh the browser, great.
7:30
As we can see, with that negative value,
7:33
it is selecting the third list item first,
then all the list items before it.
7:35
Now, if you go back and use, say, negative
n plus 4, now it targets
7:40
the fourth list item first, and every one
that precedes it, so the top four items.
7:46
Coming up next, we're gonna take a quick
code challenge, where you'll see
7:52
a good use case for using the nth-child
pseudo-class, with floated elements.
7:55
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up