1
00:00:00,000 --> 00:00:04,998
[MUSIC]

2
00:00:04,998 --> 00:00:07,055
Earlier, we learned how to target first
and

3
00:00:07,055 --> 00:00:09,870
last child elements, with structural
pseudo-classes.

4
00:00:09,870 --> 00:00:12,740
Next, we'll see how the nth-child
pseudo-class,

5
00:00:12,740 --> 00:00:15,110
can target any combination of child
elements.

6
00:00:15,110 --> 00:00:18,670
Nth-child is a useful and powerful
structural pseudo-class,

7
00:00:18,670 --> 00:00:22,670
because it can target elements based on
any position, within a parent element.

8
00:00:22,670 --> 00:00:26,780
And unlike the first and last child
pseudo-classes which only target first and

9
00:00:26,780 --> 00:00:29,610
last child elements, we can target any
child element, or

10
00:00:29,610 --> 00:00:32,000
any combination, of child elements.

11
00:00:32,000 --> 00:00:35,800
So, we're going to revisit the simple list
from the previous stage,

12
00:00:35,800 --> 00:00:37,390
to see how we're able to do that.

13
00:00:37,390 --> 00:00:41,680
And again, we're not gonna add any class
or ID hooks to our elements.

14
00:00:41,680 --> 00:00:45,260
These will be targeted dynamically, based
on where they're positioned,

15
00:00:45,260 --> 00:00:46,790
in the unordered list.

16
00:00:46,790 --> 00:00:50,980
So, first, let's go over to our style.css
file.

17
00:00:50,980 --> 00:00:53,810
And we're going to create our nth-child
selector,

18
00:00:53,810 --> 00:00:56,940
by first targeting list items with li.

19
00:00:56,940 --> 00:01:03,420
Then we're gonna type a colon, followed by
nth-child, and a set of parentheses.

20
00:01:03,420 --> 00:01:06,665
Make sure there aren't any spaces, in our
selector.

21
00:01:06,665 --> 00:01:10,142
So, nth-child uses a function-like syntax,

22
00:01:10,142 --> 00:01:14,820
that allows us to pass a value, in between
the parentheses.

23
00:01:14,820 --> 00:01:17,930
And that value is referred to as an
argument.

24
00:01:17,930 --> 00:01:19,840
Don't worry, we're not really arguing with
our CSS,

25
00:01:19,840 --> 00:01:21,970
because that would be kind of mean.

26
00:01:21,970 --> 00:01:23,810
Just think of it as a value we're passing,

27
00:01:23,810 --> 00:01:26,640
to tell the selector, what elements to
target.

28
00:01:26,640 --> 00:01:28,700
So, now inside these parentheses,

29
00:01:28,700 --> 00:01:31,700
we're gonna declare how the element will
be selected.

30
00:01:31,700 --> 00:01:36,400
Now one of the arguments we can pass, is
the keyword, odd or even.

31
00:01:36,400 --> 00:01:40,920
And what they do is, they select every
other child element, based on an odd or

32
00:01:40,920 --> 00:01:41,680
even position.

33
00:01:41,680 --> 00:01:44,900
So, if we type even, as our argument,

34
00:01:44,900 --> 00:01:49,090
we're specifying that we wanna target the
even numbered list items.

35
00:01:49,090 --> 00:01:52,370
So, the second, fourth, sixth, eighth, and
so forth.

36
00:01:52,370 --> 00:01:54,440
So, let's go back to our style sheet,

37
00:01:54,440 --> 00:01:57,660
and we're gonna add some CSS properties in
our nth-child rule.

38
00:01:57,660 --> 00:02:00,750
So, first, let's add a background
property.

39
00:02:00,750 --> 00:02:05,472
And let's set the background color to
pound 52bab3,

40
00:02:05,472 --> 00:02:09,360
our favorite aqua green color, in this
course.

41
00:02:09,360 --> 00:02:13,030
And let's set the color value, to white.

42
00:02:13,030 --> 00:02:17,410
All right, so we'll save our style sheet,
and when we take a look at the preview and

43
00:02:17,410 --> 00:02:21,660
refresh, notice how the browser only
targets those even list items,

44
00:02:21,660 --> 00:02:23,730
starting from the second one.

45
00:02:23,730 --> 00:02:27,030
Then it goes on and targets the fourth,
sixth, eighth and tenth.

46
00:02:27,030 --> 00:02:32,450
Now, if we go back and change our
argument, from even to odd,

47
00:02:34,460 --> 00:02:38,860
when we take a look at it once again, now
it targets the odd numbered list items,

48
00:02:38,860 --> 00:02:42,700
starting with the first list item, then
every other one.

49
00:02:42,700 --> 00:02:44,490
But it doesn't stop there.

50
00:02:44,490 --> 00:02:48,550
So, this is where it gets really cool,
because we're also able to use an integer,

51
00:02:48,550 --> 00:02:51,350
as an argument, to target a particular
child.

52
00:02:51,350 --> 00:02:53,710
When calculating the position of an
element,

53
00:02:53,710 --> 00:02:57,140
inside its parent, the index numbering
starts at one.

54
00:02:57,140 --> 00:03:02,210
So, for example, if we go back and pass
three, as our argument.

55
00:03:03,410 --> 00:03:06,620
Once we save and refresh the browser,
notice how

56
00:03:06,620 --> 00:03:11,320
the browser targets the third list item,
inside the parent unordered list.

57
00:03:11,320 --> 00:03:15,670
Now, if we go back and replace it with
say, seven, well, now,

58
00:03:15,670 --> 00:03:20,440
we can see that the seventh child is
selected, and so on.

59
00:03:20,440 --> 00:03:22,638
But there's actually a lot more we can do.

60
00:03:22,638 --> 00:03:25,000
What makes nth-child really powerful,

61
00:03:25,000 --> 00:03:29,900
is when we use expressions to select a
particular combination of child elements.

62
00:03:29,900 --> 00:03:32,300
Now, expressions may appear a little more
complex.

63
00:03:32,300 --> 00:03:34,260
But, as we'll soon learn, they're not so

64
00:03:34,260 --> 00:03:37,020
bad once we start experimenting with the
values.

65
00:03:37,020 --> 00:03:40,868
So, our basic expression syntax, looks
something like this.

66
00:03:40,868 --> 00:03:45,960
An plus b, now let's go over these values
mean.

67
00:03:45,960 --> 00:03:51,580
So, the values a and b, are always
represented by numbers.

68
00:03:51,580 --> 00:03:53,870
And the n value, never changes.

69
00:03:53,870 --> 00:03:55,730
It's always the letter n.

70
00:03:55,730 --> 00:04:01,030
So, starting from the right, the b value
here, is an offset value we use,

71
00:04:01,030 --> 00:04:04,170
to tell the browser the first element we
want to select.

72
00:04:04,170 --> 00:04:08,320
So, if we make this value three, this
means that the third list item,

73
00:04:08,320 --> 00:04:10,760
will be the first one selected in our
list, and

74
00:04:10,760 --> 00:04:14,200
it's gonna ignore all sibling list items
that come before it.

75
00:04:14,200 --> 00:04:19,260
Then, the a value, tells the browser the
cycle of elements to select,

76
00:04:19,260 --> 00:04:21,220
after that first one's selected.

77
00:04:21,220 --> 00:04:26,830
So, if we make the a value two, this means
that the third list item,

78
00:04:26,830 --> 00:04:28,690
will be selected first.

79
00:04:28,690 --> 00:04:32,330
Then it will select every second list item
after that.

80
00:04:32,330 --> 00:04:36,130
And as I mentioned, the end value doesn't
change in an expression.

81
00:04:36,130 --> 00:04:38,530
We can think of n as a counter,

82
00:04:38,530 --> 00:04:42,060
that indicates the a cycle value to the
browser.

83
00:04:42,060 --> 00:04:45,200
So, in this expression, the n value will
tell the browser to

84
00:04:45,200 --> 00:04:50,660
select every second list item, starting
from the third one in a list.

85
00:04:50,660 --> 00:04:51,800
All right?
So, let's take a look.

86
00:04:51,800 --> 00:04:56,920
So, we'll save our style sheet, and when
we take a look at the list in the browser,

87
00:04:56,920 --> 00:05:01,390
we can see that the first list item
selected, is the third one.

88
00:05:01,390 --> 00:05:04,257
And this was determined by our e value
here,

89
00:05:04,257 --> 00:05:08,753
then it selects every second list item, as
indicated by the a value,

90
00:05:08,753 --> 00:05:12,950
until there are no more list items to
select in our list.

91
00:05:12,950 --> 00:05:19,050
Now, if you go back and change our
expression to something like 3n plus 4,

92
00:05:19,050 --> 00:05:23,650
this means that the browser will target
the fourth list item first,

93
00:05:23,650 --> 00:05:26,060
then every third one after that.

94
00:05:26,060 --> 00:05:30,860
So, when we take a look at it once again,
now we see the fourth list item,

95
00:05:30,860 --> 00:05:34,690
selected first, then every third one.

96
00:05:34,690 --> 00:05:35,307
Cool.

97
00:05:35,307 --> 00:05:38,387
Now, there are a couple things we can do
to shorten and

98
00:05:38,387 --> 00:05:40,589
simplify our nth child expressions.

99
00:05:40,589 --> 00:05:45,916
So, first, if our a value here is one, as
in, 1n plus 4,

100
00:05:45,916 --> 00:05:52,550
we can actually omit the a value, because
it's the same as n plus 4.

101
00:05:52,550 --> 00:05:53,450
And as we can see,

102
00:05:53,450 --> 00:05:58,810
this one targets the fourth list item
first, then every other one after that.

103
00:05:58,810 --> 00:06:03,860
Now, also, if the b value in our
expression is a zero,

104
00:06:03,860 --> 00:06:09,310
as in 3n plus 0, then we can omit

105
00:06:09,310 --> 00:06:14,790
the zero from our expression, as it's the
same as using the value, 3n.

106
00:06:14,790 --> 00:06:18,810
And what this does is select every other
third child,

107
00:06:18,810 --> 00:06:21,210
starting from the third one from the top.

108
00:06:21,210 --> 00:06:24,640
Now, if the a and b values are the same,
so for instance,

109
00:06:24,640 --> 00:06:29,920
if our expression is 3n plus 3, then we
can omit the b value,

110
00:06:29,920 --> 00:06:34,460
because it's also the same as using 3n in
our expression.

111
00:06:35,490 --> 00:06:39,840
Now finally, we're also able to use
negative values in our expressions, and

112
00:06:39,840 --> 00:06:41,770
negative expressions come in handy,

113
00:06:41,770 --> 00:06:45,390
when we need to select the first few items
in a list.

114
00:06:45,390 --> 00:06:51,160
So, for example, say the first three items
in our list here, are featured items.

115
00:06:51,160 --> 00:06:54,730
And we'll always need to target and style
them, a certain way.

116
00:06:54,730 --> 00:07:02,000
Well, to do that, we can use the
expression, negative n, plus 3.

117
00:07:02,000 --> 00:07:05,140
So, let's try to figure out what's about
to happen here.

118
00:07:05,140 --> 00:07:09,650
We know that it's going to target the
third list item first,

119
00:07:09,650 --> 00:07:11,820
as indicated by the b value.

120
00:07:11,820 --> 00:07:16,950
And now we know that the n value by
itself, is the same as using 1n.

121
00:07:18,010 --> 00:07:21,930
So, I'm gonna say that with the negative
value here,

122
00:07:21,930 --> 00:07:25,335
instead of targeting every child element
that follows the third child,

123
00:07:25,335 --> 00:07:28,240
it's gonna target every child element that
precedes it.

124
00:07:28,240 --> 00:07:29,140
So, let's take a look.

125
00:07:29,140 --> 00:07:30,630
Save the style sheet.

126
00:07:30,630 --> 00:07:33,190
And when we refresh the browser, great.

127
00:07:33,190 --> 00:07:35,050
As we can see, with that negative value,

128
00:07:35,050 --> 00:07:40,760
it is selecting the third list item first,
then all the list items before it.

129
00:07:40,760 --> 00:07:46,580
Now, if you go back and use, say, negative
n plus 4, now it targets

130
00:07:46,580 --> 00:07:52,630
the fourth list item first, and every one
that precedes it, so the top four items.

131
00:07:52,630 --> 00:07:55,990
Coming up next, we're gonna take a quick
code challenge, where you'll see

132
00:07:55,990 --> 00:08:00,250
a good use case for using the nth-child
pseudo-class, with floated elements.