What are :nth-child & :nth-of-type Selectors.
Tags: css, nthchild, nthoftype, html
Published: 2021-12-29 14:32:21

## :nth-child Selector.

The `:nth-child(n)` selector matches every element that is the nth child, **regardless** of **type**, of its parent.

where `n` can be a number, a keyword, or a formula.

### selector:nth-child(integer)

Select a specific child.

![:nth-child(integer)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yidl59p96fag9h0wr109.png)

![:nth-child(integer)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5t23g600f7baepsup99x.png)

### selector:nth-child(n).

Selects all children.

![:nth-child(n)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6d69pgmr1878s7gp6qon.png)


### selector:nth-child(2n).

Selects every **second** child. 
 
 ![:nth-child(2n)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qwvgodtrhou7l5byeo65.png)

### selector:nth-child(3n).

Selects every **third** child.

![:nth-child(3n)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p7wh3v46wvptbpdkrkvq.png)
 
### selector:nth-child(n+3).

Selects the **third** child, as well as all subsequent children.

![:nth-child(n+3)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nyyzoleyyf2sh8dhgfxh.png)

### selector:nth-child(-n+3).

Selects the first three children.

![:nth-child(-n+3)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mr90fqzpopspe4b2t23z.png)
  
### selector:nth-child(2n+5).

Starting from child **number 5**, Select **every second child**.

![:nth-child(2n+5)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wt7vfka5jiykkyg7nmoj.png)

### selector:nth-child(-2n+5).

Select **every second child** until child number 5.

![:nth-child(2n+5)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9g0f6dqvhktx6gy7y69a.png)

### selector:nth-child(odd).

Selects **odd** children.

![:nth-child(odd)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ml05h1sbzqg142222i64.png)
   
### selector:nth-child(even).

Selects **even** children.

![:nth-child(even)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lkzbs67lhx3g032m4kad.png)

## :nth-of-type Selector.


The `:nth-of-type(n)` selector works the same but **of a particular type**.

**Example**

html
```html
<div class="container">
    <div class="parent">
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <span class="child"></span>
      <span class="child"></span>
      <span class="child"></span>
      <span class="child"></span>
      <span class="child"></span>
    </div>
</div>
```

css
```css
.container{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 20%;
}
.parent {
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 100%;
}
.child, span {
    height: 50px;
    width: 50px;
    background-color: lightgray;
}

.child:nth-of-type(1){
    background-color: darkblue;
}
```

**Output**

Select the first element of each type `div` and `span`.
![:nth-of-type(1)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/doac1s4szbt5echsyfya.png)
 
<a href="https://www.linkedin.com/in/youssefzidan/" target="_blank">
    <img src="https://img.shields.io/badge/LinkedIn-%230077B5.svg?&style=flat-square&logo=linkedin&logoColor=white" alt="LinkedIn">