CSS div alternating colour

Question

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

Decencies

Answer 1

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

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

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

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

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

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

<div class="container">
  <h3>Title</h3>
  <div class="row">Content</div>
  <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>
  <h3>Title</h3>
  <div class="row">Content</div>
  <div class="row">Content</div>
  <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>

Lilianaliliane

Note that this "continues" counting right through titles; if you want to "reset" the counter (e.g. so that the first row after a title is always white), you'll need to use Jezen's solution. – Bennet

@Lilianaliliane May I know why it's best to use nth-of-type rather than nth-child? Just curious. – Hartnett

@Hartnett Because in this question, nth-child would count divs and h3 elements since they're all children of the parent div container. By using nth-of-type on the div in the selector you're effectively filtering out the h3 elements. – Lilianaliliane

Answer 2

You probably want to match on type, not child.

Use :nth-of-type such as

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

Contaminate

Answer 3

The easiest solution is of course just to wrap the elements you want striped.

Your updated jsFiddle.

HTML

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

CSS

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

Bear in mind also that if browser support is important to you, you might want to generate additional classes for zebra-striping server side instead.

Pyretic

this is inefficient if he wanted to add more or use this for a comment system to make it easier to see separate comments...what he wants should be dynamic – Reenter

There's no reason why this couldn't be dynamic. – Pyretic

the wrapping elements with a container and applying css to that container's class is inefficient, not the nth child method. – Reenter

What the hell are you talking about? First you assert my method isn't dynamic, which is plain incorrect; now you say my method is less efficient. Technically, that may or may not be true, but it is in any case on such a small scale as to make it almost completely unimportant. – Pyretic

You are saying to manually wrap every other set, which if he wants to use this for stuff with more than three things and may expand it, is completely inefficient and out of the question. I don't see why you disagree... – Reenter