- :nth-child 8:00
- :nth-of-type 4:30
- :nth Pseudo-Class Challenge 2 objectives
- :nth Pseudo-Class Challenge - Pt. 2 1 objective
- :root and :target 5:12
- :not() – The Negation Pseudo-Class 4:46
- Pseudo-Elements - ::first-line and ::first-letter 5:00
- Pseudo-Elements - ::before and ::after 8:13
- The attr() CSS Function 6:32
- Pseudo-Elements Challenge 4 objectives
- Advanced Selectors Review 6 questions
Preview
Video Player
00:00
00:00
:nth-child
8:00:nth-child is a powerful structural pseudo-class because it targets child elements based on any position inside a parent.
[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