Why my .service:nth-child(1) is not is not working?

Question

HTML for each service box i want to change background. but nth-child() selector is not working.

when each service class changed to nave with respective number its working finly.

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

<section class="about-us">
  <div class="service">
    <div class="service-header">
      <i class="fas fa-pen-nib"></i>
      <h1>Interiar</h1>
    </div>
    <div class="service-text">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro corporis modi alias officia quod repudiandae fugit, eveniet ipsum, doloremque facere dolores ex illo hic quidem.</p>
    </div>
  </div>
  <div class="service">
    <div class="service-header">
      <i class="fas fa-pen-nib"></i>
      <h1>Interiar</h1>
    </div>
    <div class="service-text">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro corporis modi alias officia quod repudiandae fugit, eveniet ipsum, doloremque facere dolores ex illo hic quidem.</p>
    </div>
  </div>
  </div>

The code above works for me. What is the expected output? – choz Aug 15 '20 at 13:17 — choz, Aug 15 '20 at 13:17
this qusetion has no error – Rayees AC Aug 15 '20 at 13:22 — Rayees AC, Aug 15 '20 at 13:22
nth-child(1) use ```first-child``` – Rayees AC Aug 15 '20 at 13:23 — Rayees AC, Aug 15 '20 at 13:23
https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child – Rayees AC Aug 15 '20 at 13:36 — Rayees AC, Aug 15 '20 at 13:36

Aagam Sheth · Answer 1 · 2020-08-15T13:25:20.967

To change the background for each service box to red remove :nth-child() from the css.

.service {
  background-color: red;
}

nth-child(#) will get the number(#) of the element. Here 1st element with the match is selected and the style is applied.

To change the background for each try this :

.service:nth-child(1) {
  background-color: red;
}
.service:nth-child(2) {
  background-color: blue;
}

<section class="about-us">
  <div class="service">
    <div class="service-header">
      <i class="fas fa-pen-nib"></i>
      <h1>Interiar</h1>
    </div>
    <div class="service-text">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro corporis modi alias officia quod repudiandae fugit, eveniet ipsum, doloremque facere dolores ex illo hic quidem.</p>
    </div>
  </div>
  <div class="service">
    <div class="service-header">
      <i class="fas fa-pen-nib"></i>
      <h1>Interiar</h1>
    </div>
    <div class="service-text">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro corporis modi alias officia quod repudiandae fugit, eveniet ipsum, doloremque facere dolores ex illo hic quidem.</p>
    </div>
  </div>
  </div>

i have more than two `div` with `service` class and i want to change color of each `dive` with class `service` with different color — Vinayak Khandekar, Aug 15 '20 at 13:23
@VinayakKhandekar To change the color for each div and there are no predefined divs with service class then you need to use javascript to append a style to each service class element with a color you store in the array. — Aagam Sheth, Aug 15 '20 at 13:28

MarkBurns · Answer 2 · 2020-08-15T13:35:40.070

Remember to remove background-color from .service. Background-color should be defined in the nth-child property.

If you want it more modular, I would recommend to use even/odd.

.service {
  width: 100px;
  height: 100px;
  border: 1px solid black;
}

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

.service:nth-child(odd) {
  background-color: blue;
}

<div class="service"></div>
<div class="service"></div>
<div class="service"></div>
<div class="service"></div>
<div class="service"></div>
<div class="service"></div>
<div class="service"></div>

But you can also play around if you add different background-colors with for example :nth-child(3n+3), which means: Every third element: 3rd, 6th, 9th, etc, will have that background-color applied.

:nth-child(2n+2) => 2nd, 4th, 6th...

Why my .service:nth-child(1) is not is not working?

2 Answers2