:nth-of-type

So now we'll need to launch the new workspace for 0:01 this lesson and as we can see once we click the preview button, 0:02 there's a list that's similar to the one we've worked with, the difference is 0:06 that we're now using divs as child elements of this section element here. 0:10 So we can get even more specific with the nth structural pseudo classes, 0:15 with ones that can target particular types of elements. 0:19 The nth of type pseudo class targets an element based on 0:22 its position within a parent element, but only if it's a specific type of element. 0:26 So earlier, we saw how nth of child can target a combination of 0:31 elements based on their position inside a parent. 0:35 But even with nth child there are some potential pitfalls we 0:38 may run into depending on the position and the type of element we select. 0:42 So for instance as we learned earlier this nth child selector here will 0:46 target the fourth div inside its parent and 0:50 that it does as we're seeing here in the preview. 0:55 But watch what happens if we go back to the HTML file and 0:58 add a new element anywhere before the fourth div. 1:03 So right above the fourth div let's add an h1 element, 1:06 and let's have it say a new heading. 1:09 So let's save our index.html file. 1:14 And refresh the page, and as you can see, 1:17 even though the div is still the fourth div element, it's no longer being targeted 1:20 by the browser, because it's no longer the fourth child element, it's actually, 1:25 now, the fifth child element inside the parent. 1:30 So the important thing to keep in mind here is that nth child selectors only 1:34 target the element if it's at the exact position we specify, inside it's parent. 1:38 Now, sure we can go back and edit our selector, 1:43 to target that fifth div child, but, instead of having to update our selector, 1:45 we can use the more bulletproof nth of type selector to get around that. 1:51 Nth of type is a more flexible pseudo class if we want to 1:56 be sure we're selecting the same type of element no matter where it 1:58 is inside the parent element or what other elements appear before it. 2:03 In our case, we only want to target a specific type of child element. 2:07 We want to target divs. 2:11 So lets use the nth of type pseudo class instead. 2:12 So right after the div and the colon in 2:16 our selector, we're gonna type nth-of-type, and 2:19 once again, we're gonna target the fourth child element. 2:24 So, now, we're instructing the browser to target the fourth div inside the parent 2:30 and, it doesn't matter if other type of child elements. 2:35 Come before it as long as it's the fourth div. 2:38 So when we take a look at the preview, 2:42 we once again see the style's applied to the fourth div only, and 2:43 it will always be styled this way because again, with nth of type, 2:48 we've specifically instructed the browser to select the div that's the fourth child. 2:52 No matter what other elements are around it. 2:57 So now back in our selector, 3:00 we can pass something like the key word even as our argument, and if down 3:02 the road we nest other types of elements inside this section, it won't matter. 3:07 So for example, let's go up here and as the first child element, 3:12 let's nest a new heading and we'll just say, main heading. 3:15 And once we save both files, and refresh the browser, 3:22 we can see that it will always target the even numbered rows. 3:27 Finally, we can also use the nth last of type selector which works just 3:31 like nth of type except that it starts counting from the last child. 3:37 So for instance, let's go back to our selector and change it from nth of type 3:41 to nth last of type and if we pass one as 3:47 the argument, once we refresh the browser notice how it selects the last row. 3:53 And it will always target the last child element of the type we specify. 3:59 Now, if we go back and change it to three. 4:03 Now it selects the third div from the last of its type, so 4:08 the third one from the bottom. 4:12 So, like with the substring matching attribute selectors, and 4:14 structural pseudo-classes we discussed in the previous stage, these nth child and 4:17 nth of type selectors can come in handy or 4:22 help us out in a pinch when we have little to no control over the HTML. 4:25