CSS3 Video Tutorial: nth-of-type Selector

SitePoint is about helping web developers do their jobs better, whether they are specialist programmers, generalist coders, design-focused front end developers or any other kind of dev. We do this by providing web-based resources that explore and explain new and existing technologies and disciplines through articles, tutorials, reviews, news and commentary.

Our partners at Learnable share that goal and offer detailed video tutorials, books, courses and JumpCast videos that complement SitePoint’s resources. Most of the JumpCast videos we’ve brought to your attention have been interviews with industry professionals discussing their experiences with a particular plugin, framework or tool of some kind.

However, the JumpCast library also has an impressive set of short, practical video tutorials on aspects of working with CSS. We’re going to bring you some of those, starting with this five minute guide to the new CSS3 structural pseudo class nth-of-type.

Your host is the Australian CSS expert Russ Weakley and you’ll find the transcription a little lower down.

CSS :NTH Selector

 

 

 

00:00

 

00:00

 

 

 

 

 

 

 

 

For more JumpCast videos like this, visit Learnable

Transcription

G’day. My name is Russ Weakley from Max Design. Today, we’re going to be talking about the new CSS3 selector called nth-of-type. Now this is one of the new structural pseudo classes. So let’s have a look at its syntax and how we can use it.Okay, so first of all, let’s go and have a look at our document. Down here, we have an unordered list, and inside the unordered list, we have eight list items. Now if we were to go up and write a simple selector, we could write something like, li, and make every li have a background of red. If we have a look at that in the browser, you’ll see every single list item has a background of red. But what the nth-of-type selector allows us to do is to define specific instances of this li. We’ll start by typing something like :nth-of-type and then brackets. So this is how it’s written. We write it with an element at the front and then nth-of-type, and brackets. In this case, I’m going to use the li.

Now there’s a lot of confusion about how this actually operates. We’re actually styling the nth-of-type of the li. We’re not styling inside the li. So if we do something like three, this would be the third instance of the li. Now, inside the brackets, we can put a number of things, and the simplest ones we can put is just an integer value. So, I’m going to actually put in “3”. So what that’s actually saying is, we’re going to go and style a li, but only the third of its type. If we go down here, that’s one, two, three. So now list item three should be the only one that’s red. It’s the third of its type.

We can actually make it more refined using a number or an integer value and the letter “n”. That will actually change the way that this rule will operate, because now it’s looking for every third number. So instead of just looking for the third li, it’s looking for the third, the sixth, the ninth, etc. So it’s looking for any li that’s the third number. So if we go and have a look, you’ll see suddenly that it’s going one, two, three, four, five, six, and if we had a ninth, it would do that as well. So this allows us to do it in a much more specific way.

The next way we can use is to add onto this. So the first way was just a number or an integer. The next way was with an integer and the letter “n”, and the third way is to use a plus or a minus. Now we’ll use the plus first. Now what this is going to say is every third instance plus one. Now, before reloading, I’m going to go out here, and this is how it was a second ago, so this is every third instance. So we’re hitting one, two, three, four, five, six, seven, eight, nine. Now if you do plus one, it’s actually going to move down one. So it’s actually going to do one, two, three, four, five, six, seven, eight, nine, ten, and it will all style one. So if I reload on the page, you’ll see them all move down one. So that’s using the 3n+1 value.

Now if we use minus… Well, actually, I’ll take it back to 3n for a second. Reload there. So we’re back on just the 3n, so that’s one, two, three, four, five, six, seven, eight, nine. But if we do minus one, it’ll actually go up. So now it’s going one, two, three, four, five, six, seven, eight, so it’s moving backwards one.

We can also write a simple keyword inside. We could use “even” and that will allow us to style every even instance of the li. Now this is a great thing for marking up tables, because you can use it for something like tr and set each row without having to use JavaScript. You can also use the keyword “odd” and that will do the opposite. Now, oddly enough, the keyword “even” is exactly the same as if you’d written 2n. If we go and have a look at that, you’ll see that that is the same as even. If you want to write “odd” that is the same as writing 2n-1. So there you have it, an incredibly simple little demo of the nth-of-type selector.