CODEWITHSUNDEEP
htmlcsscss-selectors
user3352340
user3352340

Reputation: 145

.class:nth-child(even) not working?

I have an issue with nth-child, any Idea whats wrong?

HTML:

    <div class="comment">
        <div class="header">
            <div class="by">Euismod nam.</div>
        </div>
        <div class="content">
...
        </div>
        <div class="date">12-15-23</div>
    </div>
    <div class="comment">
        <div class="header">
            <div class="by">Euismod nam.</div>
        </div>
        <div class="content">
...
        </div>
        <div class="date">12-15-23</div>
    </div>

CSS:

/*--*/
.comment {
    width:600px;
    overflow:auto;
    margin:0;
    margin-top:5px;
    padding:0;
    border:solid 1px #CCC;  
    /*border-top:none;*/
}
.comment .header {
    margin:0;
    padding:1px 2px;
    overflow:auto;
    background:#B2A98A;
    color:#FFF;
}
.comment .header:nth-child(even) {
    background:#62798B;
}
.comment .header .by {
    float:right;
    z-index:90;
}
.comment .content {
    margin:0;
    padding:5px 2px;
    overflow:auto;
    background:#FeFeFe;
    color:#000;
}
.comment .date {
    margin:0;
    padding:1px 2px;
    overflow:auto;
    background:rgba(178,169,138,0.5);
    color:#FFF;
}
.comment .date:nth-child(even) {
    background:rgba(98,121,139,0.5);
}

I don't see an issue within the code, or am I missing something? [JSFIDDLE]

Upvotes: 0

Views: 847

Answers (2)

G-Cyrillus
G-Cyrillus

Reputation: 106078

.header is only one child in .comment, you should select parent : 

.comment:nth-child(even) .header {
    background:#62798B;
}

http://jsfiddle.net/Qn49d/1/

Upvotes: 5

Jason Aller
Jason Aller

Reputation: 3652

Change from:

.comment .header:nth-child(even) {

to:

.comment:nth-child(even) .header {

The reason for this is that the .comment divs are siblings. If the .header elements were under a single .comment your initial markup would work.

Upvotes: 1

Related Questions