#           
## `:nth-child`

The **`:nth-child(n)` selector** is a CSS pseudo-class that allows us to select one or more elements based on their source order, where `n` can be a number, a keyword, or a formula.

<html>
 <head>
 </head>
 <body>
   <h2>nth-child</h2>
   <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>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
    </div>
   </div>
 </body>
</html>

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

codemirror

We begin with a `div` `container` and inside it a `div` `parent` and inside the `parent` other ten `div` tags with the class `child`.

We'll provide them with some CSS styles for visualization. 

## `:nth-child(integer)`

We select a specific child.

<html>
 <head>
 </head>
 <body>
   <h2>:nth-child(3)</h2>
   <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>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
    </div>
   </div>
 </body>
</html>

.container{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 20%;
}
.parent {
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 100%;
}
.child {
    height: 50px;
    width: 50px;
    background-color: lightgray;
}

.child:nth-child(3){
    background-color: darkblue;
}

## `:nth-child(n)`

We select all children.

<html>
 <head>
 </head>
 <body>
   <h2>:nth-child(n)</h2>
   <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>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
    </div>
   </div>
 </body>
</html>

.container{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 20%;
}
.parent {
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 100%;
}
.child {
    height: 50px;
    width: 50px;
    background-color: lightgray;
}

.child:nth-child(n){
    background-color: darkblue;
}

## `:nth-child(n+3)`

We select the third child, as well as all subsequent children. 

<html>
 <head>
 </head>
 <body>
   <h2>:nth-child(n+3)</h2>
   <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>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
    </div>
   </div>
 </body>
</html>

.container{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 20%;
}
.parent {
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 100%;
}
.child {
    height: 50px;
    width: 50px;
    background-color: lightgray;
}

.child:nth-child(n+3){
    background-color: darkblue;
}

# `:nth-of-type`


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

## Example

We select the first element of each type `div` and `span`.

.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;
}

What are :nth-child and :nth-of-type selectors in CSS?

:nth-child and :nth-of-type enable CSS selections based on order or element type in HTML structures.