CSS nth-child is not working based on my expectation [duplicate]

Question

I have following HTML code

<div class="our-services">
    <h1 class="center-text">Our Services</h1>
    <div class="service-box">
        <h3 class="center-text">Service 1</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non.</p>
    </div>
    <div class="service-box">
        <h3 class="center-text">Service 2</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non.</p>
    </div>
    <div class="service-box">
        <h3 class="center-text">Service 3</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non.</p>
    </div>          
</div>

and there is a class called service-box which I used 3 times. Now I want margin-right should be zero to the 3rd service-box class. So for that I am using following CSS code:

.service-box:nth-child(4) {
    margin-right: 0;
}

and It working fine.

but my question is why the nth value is 4 instead of 3? If I use 3 then it's not working, why?

Update: (It's not duplicate Question)

My question was why I need to use 4 instead of 3. As I saw an example here: https://www.w3schools.com/csSref/tryit.asp?filename=trycss3_nth-child

In this link, you can see that if you want to select the second p element then you need to use p:nth-child(2), right? So then why my code is not accepting 3?

Answer 1

This is because the first service-box is actually the second child of its parent, center-text being the first. Remove center-text and use .service-box:nth-child(3).

.service-box:nth-child(3) {
  background-color: red;
}

<div class="our-services">
  <div class="service-box">
    <h3 class="center-text">Service 1</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non.</p>
  </div>
  <div class="service-box">
    <h3 class="center-text">Service 2</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non.</p>
  </div>
  <div class="service-box">
    <h3 class="center-text">Service 3</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non.</p>
  </div>
</div>

if you want, you can use nth-of-type, which is more specific

.service-box:nth-of-type(3) {
  background-color: red;
}

<div class="our-services">
  <h1 class="center-text">Our Services</h1>
  <div class="service-box">
    <h3 class="center-text">Service 1</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non.</p>
  </div>
  <div class="service-box">
    <h3 class="center-text">Service 2</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non.</p>
  </div>
  <div class="service-box">
    <h3 class="center-text">Service 3</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non.</p>
  </div>
</div>

More info here

Answer 2

The nth-child selector is not an nth-class selector. So it doesn't select depending on class or other attributes. It selects the nth element which is in a list of children.

In this case you need to add (4) not (3) because you have <h1 class="center-text"> which is a sibling of your service-box. So all service-box + h1 are children of the same parent.

Docs are very clear

w3schools MDN

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

The :nth-child() CSS pseudo-class matches elements based on their position in a group of siblings.

Take this example

.my-child:nth-child(3) {
  color:red;
}

<div>
 <span>First child</span>
 <p> Second Child </p>
 <h2 class="my-child"> THird Child</h2>
</div>

so to select the my-child with the nth-child selector, you need to add (3) because even if it's a different element than the others and has a specific class, it's the 3rd child inside the parent element.

That being said, there is NO nth-class selector. In your specific case, you can use the nth-of-type(n) selector. Which selects the type of the element. And because service-box are div elements, and the only other sibling is a h1 element. Using nth-of-type(3) will select your 3rd section-box.

But if you want to select the last child and not a specific one, you can use :last-child

.service-box:nth-of-type(3) {
  background-color:red;
}

<div class="our-services">
    <h1 class="center-text">Our Services</h1>
    <div class="service-box">
        <h3 class="center-text">Service 1</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non.</p>
    </div>
    <div class="service-box">
        <h3 class="center-text">Service 2</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non.</p>
    </div>
    <div class="service-box">
        <h3 class="center-text">Service 3</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non.</p>
    </div>          
</div>