Reputation: 145
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
Reputation: 106078
.header
is only one child in .comment
, you should select parent :
.comment:nth-child(even) .header {
background:#62798B;
}
Upvotes: 5
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