1 00:00:01,050 --> 00:00:02,950 So now we'll need to launch the new workspace for 2 00:00:02,950 --> 00:00:06,910 this lesson and as we can see once we click the preview button, 3 00:00:06,910 --> 00:00:10,210 there's a list that's similar to the one we've worked with, the difference is 4 00:00:10,210 --> 00:00:15,880 that we're now using divs as child elements of this section element here. 5 00:00:15,880 --> 00:00:19,740 So we can get even more specific with the nth structural pseudo classes, 6 00:00:19,740 --> 00:00:22,860 with ones that can target particular types of elements. 7 00:00:22,860 --> 00:00:26,220 The nth of type pseudo class targets an element based on 8 00:00:26,220 --> 00:00:31,130 its position within a parent element, but only if it's a specific type of element. 9 00:00:31,130 --> 00:00:35,790 So earlier, we saw how nth of child can target a combination of 10 00:00:35,790 --> 00:00:38,430 elements based on their position inside a parent. 11 00:00:38,430 --> 00:00:42,230 But even with nth child there are some potential pitfalls we 12 00:00:42,230 --> 00:00:46,260 may run into depending on the position and the type of element we select. 13 00:00:46,260 --> 00:00:50,970 So for instance as we learned earlier this nth child selector here will 14 00:00:50,970 --> 00:00:55,320 target the fourth div inside its parent and 15 00:00:55,320 --> 00:00:58,150 that it does as we're seeing here in the preview. 16 00:00:58,150 --> 00:01:03,390 But watch what happens if we go back to the HTML file and 17 00:01:03,390 --> 00:01:06,160 add a new element anywhere before the fourth div. 18 00:01:06,160 --> 00:01:09,590 So right above the fourth div let's add an h1 element, 19 00:01:09,590 --> 00:01:14,540 and let's have it say a new heading. 20 00:01:14,540 --> 00:01:17,240 So let's save our index.html file. 21 00:01:17,240 --> 00:01:20,110 And refresh the page, and as you can see, 22 00:01:20,110 --> 00:01:25,250 even though the div is still the fourth div element, it's no longer being targeted 23 00:01:25,250 --> 00:01:30,040 by the browser, because it's no longer the fourth child element, it's actually, 24 00:01:30,040 --> 00:01:34,400 now, the fifth child element inside the parent. 25 00:01:34,400 --> 00:01:38,400 So the important thing to keep in mind here is that nth child selectors only 26 00:01:38,400 --> 00:01:43,170 target the element if it's at the exact position we specify, inside its parent. 27 00:01:43,170 --> 00:01:45,930 Now, sure we can go back and edit our selector, 28 00:01:45,930 --> 00:01:51,510 to target that fifth div child, but, instead of having to update our selector, 29 00:01:51,510 --> 00:01:56,120 we can use the more bulletproof nth of type selector to get around that. 30 00:01:56,120 --> 00:01:58,890 Nth of type is a more flexible pseudo class if we want to 31 00:01:58,890 --> 00:02:03,310 be sure we're selecting the same type of element no matter where it 32 00:02:03,310 --> 00:02:07,120 is inside the parent element or what other elements appear before it. 33 00:02:07,120 --> 00:02:11,120 In our case, we only want to target a specific type of child element. 34 00:02:11,120 --> 00:02:12,740 We want to target divs. 35 00:02:12,740 --> 00:02:16,050 So let's use the nth of type pseudo class instead. 36 00:02:16,050 --> 00:02:19,720 So right after the div and the colon in 37 00:02:19,720 --> 00:02:24,700 our selector, we're gonna type nth-of-type, and 38 00:02:24,700 --> 00:02:30,040 once again, we're gonna target the fourth child element. 39 00:02:30,040 --> 00:02:35,410 So, now, we're instructing the browser to target the fourth div inside the parent 40 00:02:35,410 --> 00:02:38,340 and, it doesn't matter if other type of child elements 41 00:02:38,340 --> 00:02:42,250 come before it as long as it's the fourth div. 42 00:02:42,250 --> 00:02:43,740 So when we take a look at the preview, 43 00:02:43,740 --> 00:02:48,240 we once again see the style's applied to the fourth div only, and 44 00:02:48,240 --> 00:02:52,730 it will always be styled this way because again, with nth of type, 45 00:02:52,730 --> 00:02:57,860 we've specifically instructed the browser to select the div that's the fourth child. 46 00:02:57,860 --> 00:03:00,630 No matter what other elements are around it. 47 00:03:00,630 --> 00:03:02,040 So now back in our selector, 48 00:03:02,040 --> 00:03:07,360 we can pass something like the key word even as our argument, and if down 49 00:03:07,360 --> 00:03:12,250 the road we nest other types of elements inside this section, it won't matter. 50 00:03:12,250 --> 00:03:15,700 So for example, let's go up here and as the first child element, 51 00:03:15,700 --> 00:03:20,520 let's nest a new heading and we'll just say, main heading. 52 00:03:22,220 --> 00:03:27,470 And once we save both files, and refresh the browser, 53 00:03:27,470 --> 00:03:31,890 we can see that it will always target the even numbered rows. 54 00:03:31,890 --> 00:03:37,150 Finally, we can also use the nth last of type selector which works just 55 00:03:37,150 --> 00:03:41,090 like nth of type except that it starts counting from the last child. 56 00:03:41,090 --> 00:03:47,450 So for instance, let's go back to our selector and change it from nth of type 57 00:03:47,450 --> 00:03:53,850 to nth last of type and if we pass one as 58 00:03:53,850 --> 00:03:59,680 the argument, once we refresh the browser notice how it selects the last row. 59 00:03:59,680 --> 00:04:03,520 And it will always target the last child element of the type we specify. 60 00:04:03,520 --> 00:04:06,440 Now, if we go back and change it to three. 61 00:04:08,990 --> 00:04:12,970 Now it selects the third div from the last of its type, so 62 00:04:12,970 --> 00:04:14,960 the third one from the bottom. 63 00:04:14,960 --> 00:04:17,980 So, like with the substring matching attribute selectors, and 64 00:04:17,980 --> 00:04:22,910 structural pseudo-classes we discussed in the previous stage, these nth child and 65 00:04:22,910 --> 00:04:25,330 nth of type selectors can come in handy or 66 00:04:25,330 --> 00:04:29,660 help us out in a pinch when we have little to no control over the HTML.