The NTH Pseudo Class

3 min readJun 16, 2019

The NTH pseudo class is a very powerful way to control siblings elements of the same parent or types of the same element

As soon as you start use the NTH pseudo class, you’ll find that you can do things very easy that required from you to use a specific class for each element or group of elements

NTH-CHILD and NTH-OF-TYPE

The difference between these two pseudo is that with NTH-CHILD you will affect all elements under the same parent while with NTH-OF-TYPE you’ll affect only the specific element type (e.g: div, span, p etc.) under the same parent

Let’s dive in and simplify the things

FIRST and LAST

The easiest way to control the first or last element is with the pseudo first-child, last-child, first-of-type and last-of-type

First child

Will change the design for the first-child only

Last child

Will change the design for the last-child only

First-of-type

Will change the design for the first-of-type item only — as you can see, there are 2 boxes with different design, as we have 2 HTML tags types

Last-of-type

Will change the design for the last-of-type item only — as you can see, there are 2 boxes with different design, as we have 2 HTML tags type

ODD and EVEN

Think on change the design of all the odd or even elements under the same parent, if you’re not familiar with this pseudo class, I bet you will give class to the odds or evens elements but with these pseudo class — nth-child(odd), nth-child(even), nth-of-type(odd) and nth-of-type(even) — it will be easy

nth-child(odd)

Will change the design for all odd elements under the same parent

nth-child(even)

Will change the design for all even elements under the same parent

nth-of-type(odd)

Will change the design for all odd of the same type under the same parent

nth-of-type(even)

Will change the design for all even of the same type under the same parent

Let’s play with numbers

To design just the 5th element you can use nth-child(3) or for a specific element nth-of-type(5)

nth-child(x)

nth-of-type(x)

Starting / Ending point

If we want to change the design starting of the 3rd element we’ll use nth-child(n+3) and if we want to change the design for the first 5 elements we’ll use nth-child(-n+5) The same with nth-of-type(n+3) and nth-of-type(-n+5)

nth-child(x+3)

Will change the design from the 3rd element

nth-child(-x+5)

Will change the design till the 5th element

nth-of-type(x+3)

Will change the design from the 3rd of the same element type

nth-of-type(-x+5)

Will change the design from the 5th of the same element type

Getting complex

With pseudo class, we can also change the design for an element with with fixed amount of space between the elements — e.g: start from the x element than skip y elements — nth-child(xn + y) will do this job easy

nth-child(3n + 1)

With this declaration of the pseudo we will change the design every 3rd element starting from the first one

nth-of-type(3n + 1)

This is the same as nth-child(3n + 1) but will change the design of specific element

Even more complex

We can even go more complex:

Change the design of all the odd elements, starting from the 3rd element of specific type [:nth-of-type(odd):nth-child(n + 3)]
Change the design starting from 5th element and ending at 15 element [:nth-child(n + 5):nth-child(-n + 15)]

I’ve created a collection of codepen with the above examples and some more and you can check them, play with them and understand how this nth is working — https://codepen.io/collection/96b9925ef8ce29a6ba710df68f3f3d84/

That’s all for now
I hope you’ve enjoyed reading this article and learned some new things.
If you like this post, I would appreciate applause and sharing

Who am I?

My name is Itzik Pop and I’m a CSS architect