CODEWITHSUNDEEP
javascripthtmlcsscss-selectorsbackground-color
nael
nael

Reputation: 1507

CSS nth-child on nested divs with different classes

I have nested divs and I am trying to alternate the background color and the border size.

I have the following HTML

<div class="container">
  <div class="white-bg-alt">
    <div class="white-bg">
      <p class="colored-p">FirstPart</p>
    </div>
  </div>
  <div class="white-bg-alt">
    <div class="white-bg">
      <p class="colored-p">SecondPart</p>
    </div>
  </div>
  <div class="white-bg-alt">
    <div class="white-bg">
      <p class="colored-p">ThirdPart</p>
    </div>
  </div>
</div>

I want to be able to make the background color to gray when odd .white-bg-alt .white-bg and white when even.

I also want the p.colored-p to be white when .white-bg-alt .white-bg is odd and gray when even.

Here is the CSS I have - but not working, it either gives me all white, or if I modify it, it gives all gray, but not ALTERNATING.

.white-bg-alt .white-bg:nth-child(odd) {
  background-color: #EAEAE3;
  border-top: 0px;
}
.white-bg-alt .white-bg:nth-child(even) {
  border-bottom: 2px;
  background-color: #FFF;
}
.white-bg-alt .white-bg:nth-child(odd) .colored-p {
  background-color: #FFF;
}
.white-bg-alt .white-bg:nth-child(even) .colored-p {
  background-color: #EAEAE3;
}

Any ideas why this isn't working? I was able to do it with Javascript but I'd rather not do any styling inside javascript.

Upvotes: 2

Views: 2463

Answers (4)

connexo
connexo

Reputation: 56853

:nth-child, as well as :nth-of-type, only count elements with the same parent element. They must be siblings. But since your .white-bg-alt all have the same parent elements, you can go with those:

.white-bg-alt:nth-child(odd) .white-bg {
  background-color: #EAEAE3;
  border-top: 0px;
}
.white-bg-alt:nth-child(even) .white-bg {
  border-bottom: 2px;
  background-color: #FFF;
}
.white-bg-alt:nth-child(odd) .white-bg .colored-p {
  background-color: #FFF;
}
.white-bg-alt:nth-child(even) .white-bg .colored-p {
  background-color: #EAEAE3;
}

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388446

The problem is white-bg-alt is odd/even element not the white-bg element

.white-bg-alt:nth-child(odd) .white-bg {
  background-color: #EAEAE3;
  border-top: 0px;
}
.white-bg-alt:nth-child(even) .white-bg {
  border-bottom: 2px;
  background-color: #FFF;
}
.white-bg-alt:nth-child(odd) .white-bg .colored-p {
  background-color: #FFF;
}
.white-bg-alt:nth-child(even) .white-bg .colored-p {
  background-color: #EAEAE3;
}
<div class="container">
  <div class="white-bg-alt">
    <div class="white-bg">
      <p class="colored-p">FirstPart</p>
    </div>
  </div>
  <div class="white-bg-alt">
    <div class="white-bg">
      <p class="colored-p">SecondPart</p>
    </div>
  </div>
  <div class="white-bg-alt">
    <div class="white-bg">
      <p class="colored-p">ThirdPart</p>
    </div>
  </div>
</div>

Upvotes: 2

stevenw00
stevenw00

Reputation: 1156

You are targetting the wrong element for nth-child. Currently you are targetting .white-bg but that will always be odd because there is only one of this element within its scope.

Instead you want to alternate between the .white-bg-alt element.

So a simple change to the following will solve your problem:

.white-bg-alt:nth-child(odd) .white-bg {
  background-color: #EAEAE3;
  border-top: 0px;
}
.white-bg-alt:nth-child(even) .white-bg {
   border-bottom: 2px;
   background-color: #FFF;
}
.white-bg-alt:nth-child(odd) .white-bg .colored-p {
   background-color: #FFF;
}
.white-bg-alt:nth-child(even) .white-bg .colored-p {
  background-color: #EAEAE3;
}

Upvotes: 2

Wes Foster
Wes Foster

Reputation: 8910

.white-bg is always the first child in its scope, so it's always odd.

Try this instead:

.white-bg-alt:nth-child(odd) .white-bg {
  background-color: #EAEAE3;
  border-top: 0px;
}
.white-bg-alt:nth-child(even) .white-bg {
  border-bottom: 2px;
  background-color: #FFF;
}
.white-bg-alt:nth-child(odd) .white-bg .colored-p {
  background-color: #FFF;
}
.white-bg-alt:nth-child(even) .white-bg .colored-p {
  background-color: #EAEAE3;
}

This applies the :nth-child selector to the .white-bg-alt div, which has multiple of its type in its scope.

Upvotes: 1

Related Questions