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.