So now we'll need to launch the new workspace for

this lesson and as we can see once we click the preview button,

there's a list that's similar to the one we've worked with, the difference is

that we're now using divs as child elements of this section element here.

So we can get even more specific with the nth structural pseudo classes,

with ones that can target particular types of elements.

The nth of type pseudo class targets an element based on

its position within a parent element, but only if it's a specific type of element.

So earlier, we saw how nth of child can target a combination of

elements based on their position inside a parent.

But even with nth child there are some potential pitfalls we

may run into depending on the position and the type of element we select.

So for instance as we learned earlier this nth child selector here will

target the fourth div inside its parent and

that it does as we're seeing here in the preview.

But watch what happens if we go back to the HTML file and

add a new element anywhere before the fourth div.

So right above the fourth div let's add an h1 element,

and let's have it say a new heading.

So let's save our index.html file.

And refresh the page, and as you can see,

even though the div is still the fourth div element, it's no longer being targeted

by the browser, because it's no longer the fourth child element, it's actually,

now, the fifth child element inside the parent.

So the important thing to keep in mind here is that nth child selectors only

target the element if it's at the exact position we specify, inside it's parent.

Now, sure we can go back and edit our selector,

to target that fifth div child, but, instead of having to update our selector,

we can use the more bulletproof nth of type selector to get around that.

Nth of type is a more flexible pseudo class if we want to

be sure we're selecting the same type of element no matter where it

is inside the parent element or what other elements appear before it.

In our case, we only want to target a specific type of child element.

We want to target divs.

So lets use the nth of type pseudo class instead.

So right after the div and the colon in

our selector, we're gonna type nth-of-type, and

once again, we're gonna target the fourth child element.

So, now, we're instructing the browser to target the fourth div inside the parent

and, it doesn't matter if other type of child elements.

Come before it as long as it's the fourth div.

So when we take a look at the preview,

we once again see the style's applied to the fourth div only, and

it will always be styled this way because again, with nth of type,

we've specifically instructed the browser to select the div that's the fourth child.

No matter what other elements are around it.

So now back in our selector,

we can pass something like the key word even as our argument, and if down

the road we nest other types of elements inside this section, it won't matter.

So for example, let's go up here and as the first child element,

let's nest a new heading and we'll just say, main heading.

And once we save both files, and refresh the browser,

we can see that it will always target the even numbered rows.

Finally, we can also use the nth last of type selector which works just

like nth of type except that it starts counting from the last child.

So for instance, let's go back to our selector and change it from nth of type

to nth last of type and if we pass one as

the argument, once we refresh the browser notice how it selects the last row.

And it will always target the last child element of the type we specify.

Now, if we go back and change it to three.

Now it selects the third div from the last of its type, so

the third one from the bottom.

So, like with the substring matching attribute selectors, and

structural pseudo-classes we discussed in the previous stage, these nth child and

nth of type selectors can come in handy or

help us out in a pinch when we have little to no control over the HTML.