nth-child not working on my code?

Question

my problem is simple. I've put my code on this fiddle: http://jsfiddle.net/G79X9/61/

.historyContainer{
    margin-top: 45px;
    width: 856px;
    margin: 29px auto;
    }
    .depositContainer :nth-child(even)
    {
        background-color: green;
    }
    .depositContainer :nth-child(even)
    {
        background-color: red;
    }
    .withdrawContainer :nth-child(even)
    {
        background-color: red;
    }
    .withdrawContainer :nth-child(even)
    {
        background-color: green;
    }
    .offerHistory1{
        width: 50%;
        float: left;
        text-align: center;
        background-color: #cdc;
    }
    .offerHistory2{
        width: 50%;
        float: left;
        text-align: center;
        background-color: #dcd;
    }
    .depositHistory{
        width: 50%;
        float: left;
    }
    .withdrawHistory{
        width: 50%;
        float: right;
    }

I just want the divs background to be "stripped"(one with one color and the other with another color). I thought this should work but it isn't.

In JSFiddle you can tidy up your code! It's right from the save button. — user3589620
– user3589620, Commented Dec 29, 2015 at 1:21

Jonathan Zúñiga · Accepted Answer · 2015-12-29 01:00:57Z

3

So like this?

<div class="historyContainer">
  <div class="offerHistory1">Deposit</div>
  <div class="offerHistory2">Withdraw</div>
  <div class="depositHistory">
    <div class="depositContainer"><b>ID: 25 - Status: </b>Forbiden: Trade hold</div>
    <div class="depositContainer"><b>ID: 24 - Status: </b>Forbiden: Trade hold</div>
  </div>
  <div class="withdrawHistory">
    <div class="withdrawContainer"><b>ID: 38 - Status: </b>coins refunded</div>
  </div>
</div>

CSS code...

.historyContainer{
    margin-top: 45px;
    width: 856px;
    margin: 29px auto;
}
.depositContainer:nth-child(even)
{
    background-color: green;
}
.depositContainer:nth-child(odd)
{
    background-color: red;
}
.withdrawContainer:nth-child(even)
{
    background-color: red;
}
.withdrawContainer:nth-child(odd)
{
    background-color: green;
}
.offerHistory1{
    width: 50%;
    float: left;
    text-align: center;
    background-color: #cdc;
}
.offerHistory2{
    width: 50%;
    float: left;
    text-align: center;
    background-color: #dcd;
}
.depositHistory{
    width: 50%;
    float: left;
}
.withdrawHistory{
    width: 50%;
    float: right;
}

http://jsfiddle.net/jonathanzuniga/7kp131d9/

answered Dec 29, 2015 at 1:00

Jonathan Zúñiga

6453 gold badges13 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ElChiniNet Over a year ago

@MarcielFonseca You need to add even or odd. Not all even.

Jonathan Zúñiga Over a year ago

@MarcielFonseca I just removed the blank space between the classes and the pseudo selectors and replace the second :nth-child(even) with :nth-child(odd).

Johannes · Accepted Answer · 2015-12-29 01:06:17Z

3

you have two mistakes in your code:

1.) Don't leave spaces before pseudo-classes: Not .depositContainer :nth-child(even), but .depositContainer:nth-child(even)

2.) You have to swap between "odd" and "even" in the parenthesis after your pseudo-classes

answered Dec 29, 2015 at 1:06

Johannes

67.9k22 gold badges84 silver badges139 bronze badges

1 Comment

Marciel Fonseca Over a year ago

Wow, how could I not notice that? Thank You!

Collectives™ on Stack Overflow

nth-child not working on my code?

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related