Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

CSS Selectors

Well done!

You have completed CSS Selectors!

Sign up for Treehouse Back to Library
Preview
Video Player
00:00
00:00
00:00
  1. 2x 2x
  2. 1.75x 1.75x
  3. 1.5x 1.5x
  4. 1.25x 1.25x
  5. 1.1x 1.1x
  6. 1x 1x
  7. 0.75x 0.75x
  8. 0.5x 0.5x
Use Up/Down Arrow keys to increase or decrease volume.

:nth-of-type

4:30 with Guil Hernandez

The :nth-of-type pseudo-class targets an element based on its position within a parent, but only if it’s a specific type of element.

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 its 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 let's 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