Preview
Video Player
00:00
00:00
:nth-of-type
4:30The :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