p:nth-child(n) not working within css divs - css-selectors

Question

I am trying to control the padding of the first, second and third p tags within a div but can't seem to get it working, below is the code I have
<div class="col-sm-6 col-xs-12 col-md-3 col-lg-3">
<div class="icon-box-3 wow fadeInUp" data-wow-delay="0.6s" data-wow-offset="150">
<div class="icon-boxwrap2"><i class="fa fa-medkit icon-box-back2"></i></div>
<div class="icon-box2-title">Free assessments</div>
<p>
We offer FREE 10 minute assessments at our clinics, to see if osteopathy is right for you.
</p>
<div class="iconbox-readmore">FAQs</div>
</div>
</div>
<div class="col-sm-6 col-xs-12 col-md-3 col-lg-3">
<div class="icon-box-3 wow fadeInDown" data-wow-delay="0.9s" data-wow-offset="150">
<div class="icon-boxwrap2"><i data-icon="\e609" class="icon-stethoscope icon-box-back2"></i></div>
<div class="icon-box2-title">Registered</div>
<p>
We are registered osteopaths with the General Osteopathic Council.
</p>
<div class="iconbox-readmore">About</div>
</div>
</div>
<div class="col-sm-6 col-xs-12 col-md-3 col-lg-3">
<div class="icon-box-3 wow fadeInUp" data-wow-delay="1.2s" data-wow-offset="150">
<div class="icon-boxwrap2"><i class="icon-ambulance icon-box-back2"></i></div>
<div class="icon-box2-title">Areas Covered</div>
<p>
The areas generally covered are North London and Hertfordshire, but please do ring to see if we will cover your area.
</p>
<div class="iconbox-readmore">FAQs</div>
</div>
</div>
<style>
.icon-box-3 p:nth-child(1) {
padding: 0 15px 37px 15px;
}
.icon-box-3 p:nth-child(2) {
padding: 0 15px 37px 15px;
}
.icon-box-3 p:nth-child(3) {
padding: 0 15px 37px 15px;
}
</style>
When I do the above, it makes the all three p tags use the same css selector and uses the following line for some reason
.icon-box-3 p:nth-child(3) {
padding: 0 15px 37px 15px;
}
I don't get where it's going wrong?

Answer 1

You need to apply nth-of-type and nth-child classes on parent selector. icon-box-3 is a child under a parent div, which is why your class selection is failing.
.icon-wrapper:nth-of-type(1) p {
background: red;
padding: 0 15px 37px 15px;
}
.icon-wrapper:nth-of-type(2) p {
background: green;
padding: 0 15px 37px 15px;
}
.icon-wrapper:nth-of-type(3) p {
background: blue;
padding: 0 15px 37px 15px;
}
<div class="col-sm-6 col-xs-12 col-md-3 col-lg-3 icon-wrapper">
<div class="icon-box-3 wow fadeInUp" data-wow-delay="0.6s" data-wow-offset="150">
<div class="icon-boxwrap2"><i class="fa fa-medkit icon-box-back2"></i></div>
<div class="icon-box2-title">Free assessments</div>
<p>
We offer FREE 10 minute assessments at our clinics, to see if osteopathy is right for you.
</p>
<div class="iconbox-readmore">FAQs</div>
</div>
</div>
<div class="col-sm-6 col-xs-12 col-md-3 col-lg-3 icon-wrapper">
<div class="icon-box-3 wow fadeInDown" data-wow-delay="0.9s" data-wow-offset="150">
<div class="icon-boxwrap2"><i data-icon="\e609" class="icon-stethoscope icon-box-back2"></i></div>
<div class="icon-box2-title">Registered</div>
<p>
We are registered osteopaths with the General Osteopathic Council.
</p>
<div class="iconbox-readmore">About</div>
</div>
</div>
<div class="col-sm-6 col-xs-12 col-md-3 col-lg-3 icon-wrapper">
<div class="icon-box-3 wow fadeInUp" data-wow-delay="1.2s" data-wow-offset="150">
<div class="icon-boxwrap2"><i class="icon-ambulance icon-box-back2"></i></div>
<div class="icon-box2-title">Areas Covered</div>
<p>
The areas generally covered are North London and Hertfordshire, but please do ring to see if we will cover your area.
</p>
<div class="iconbox-readmore">FAQs</div>
</div>
</div>