nth-child() Selectors In CSS

Hello Developers, In this blog, we will learn how to use the nth-child() selector in CSS

Let’s get started

I am going to implement it in react app but you can use it on normal HTML also if you want

First create new app using following command

npx create-react-app

HTML code (put it in your HTML file or in your App,js file (for React))

<div className='grand-parent'>
    <span>:nth-child(1)</span>
    <div className='parent1 parent'>
        <div className='div'></div>
        <div className='div'></div>
        <div className='div'></div>
        <div className='div'></div>
        <div className='div'></div>
        <div className='div'></div>
    </div>
</div>
<div className='grand-parent'>
    <span>:nth-child(odd)</span>
    <div className='parent2 parent'>
        <div className='div'></div>
        <div className='div'></div>
        <div className='div'></div>
        <div className='div'></div>
        <div className='div'></div>
        <div className='div'></div>
    </div>
</div>
<div className='grand-parent'>
    <span>:nth-child(even)</span>
    <div className='parent3 parent'>
        <div className='div'></div>
        <div className='div'></div>
        <div className='div'></div>
        <div className='div'></div>
        <div className='div'></div>
        <div className='div'></div>
    </div>
</div>
<div className='grand-parent'>
    <span>:first-child</span>
    <div className='parent4 parent'>
        <div className='div'></div>
        <div className='div'></div>
        <div className='div'></div>
        <div className='div'></div>
        <div className='div'></div>
        <div className='div'></div>
    </div>
</div>
<div className='grand-parent'>
    <span>:last-child</span>
    <div className='parent5 parent'>
        <div className='div'></div>
        <div className='div'></div>
        <div className='div'></div>
        <div className='div'></div>
        <div className='div'></div>
        <div className='div'></div>
    </div>
</div>
<div className='grand-parent'>
    <span>:nth-last-child(2)</span>
    <div className='parent6 parent'>
        <div className='div'></div>
        <div className='div'></div>
        <div className='div'></div>
        <div className='div'></div>
        <div className='div'></div>
        <div className='div'></div>
    </div>
</div>
<div className='grand-parent'>
    <span>:nth-child(3n)</span>
    <div className='parent7 parent'>
        <div className='div'></div>
        <div className='div'></div>
        <div className='div'></div>
        <div className='div'></div>
        <div className='div'></div>
        <div className='div'></div>
    </div>
</div>

CSS code:

.div {
  height: 30px;
  border: 1px solid red;
  display: flex;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 30px;
}

.parent {
  display: flex;
  gap: 15px
}

.grand-parent {
  display: flex;
  width: 420px;
  justify-content: space-between;
  gap: 30px;
  align-items: center;
}

.parent1:hover :nth-child(1) {
  background-color: red;
}

.parent2:hover :nth-child(odd) {
  background-color: red;
}

.parent3:hover :nth-child(even) {
  background-color: red;
}

.parent4:hover :first-child {
  background-color: red;
}

.parent5:hover :last-child {
  background-color: red;
}

.parent6:hover :nth-last-child(2) {
  background-color: red;
}

.parent7:hover :nth-child(3n) {
  background-color: red;
}

Demo: