Andrew Morris Andrew Morris - 3 months ago 16
CSS Question

CSS div alternating colour

I'm trying to zebra stripe my divs in my website, sounds simple enough, however I've found that when I added a header in between the rows of my divs it seems to count the header in the odd/even styling

HTML

<div class="container">
<h3>Title</h3>
<div class="row">Content</div>
<div class="row">Content</div>
<h3>Title</h3>
<div class="row">Content</div>
<div class="row">Content</div>
<div class="row">Content</div>
<h3>Title</h3>
<div class="row">Content</div>
<div class="row">Content</div>
<div class="row">Content</div>
<div class="row">Content</div>
</div>


CSS

.container {
width:600px;
margin:0 auto;
}

.row {
line-height:24pt;
border: solid 1px black;
}

.row:nth-child(odd) {
background: #e0e0e0;
}

h3 {
line-height:36pt;
font-weight:bold;
color:blue;
}


fiddle

I would have thought that the code already in the fiddle would basically ignore the header and carry on striping, but it appears that it considers the header as a child

Answer

Don't use nth-child, use nth-of-type

div.container > div:nth-of-type(odd) {
    background: #e0e0e0;
}

jsFiddle example

Comments