# The NTH Pseudo Class

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

you will affect **NTH-CHILD****all** elements under the same parent while with

you’ll affect **NTH-OF-TYPE****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**

and **first-of-type****last-of-type**

## First child

Will change the design for the

only**first-child**

## Last child

Will change the design for the

only**last-child**

## First-of-type

Will change the design for the

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

## Last-of-type

Will change the design for the

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

**ODD and EVEN**

Think on change the design of all the

or **odd**

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 — **even**

, **nth-child(odd)**

, **nth-child(even)**

and **nth-of-type(odd)**

— it will be easy**nth-of-type(even)**

**nth-child(odd)**

Will change the design for all

elements under the same parent**odd**

**nth-child(even)**

Will change the design for all

elements under the same parent**even**

## nth-of-type(odd)

Will change the design for all

of the same type under the same parent**odd**

## nth-of-type(even)

Will change the design for all

of the same type under the same parent**even**

# Let’s play with numbers

To design just the 5th element you can use

or for a specific element **nth-child(3)****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

and **nth-of-type(n+3)****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

is working — https://codepen.io/collection/96b9925ef8ce29a6ba710df68f3f3d84/**nth**

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

You can read more posts:

CSS Scroll snap — How It Really Works

Neat Stuff With HTML & CSS

Using CSS Logical Properties Today