Reputation: 1507
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
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
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
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
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