CSS even/odd row selectors (zebra striping)

As a quick CSS note, if you want to achieve a “zebra striping” style with even and odd CSS row selectors, CSS styles like this will get the job done:

.path-frontpage .content-inner-right .content-type-Text:nth-child(even) {
    /* yellow */
    background-color: #fdfdf6;
}

.path-frontpage .content-inner-right .content-type-Text:nth-child(odd) {
    /* blue */
    background-color: #f3fbff;
}

I use that CSS for the front page of this website, but if you want a simpler example, here you go:

p:nth-child(even) {
    background-color: #fdfdf6;
}

p:nth-child(odd) {
    background-color: #f3fbff;
}

I haven’t tested that, but it should make the background color of even-numbered paragraphs a light yellow color, and the background color of odd-numbered paragraphs a light blue color. You can also select rows by numeric values, if desired:

p:nth-child(1) {
    background-color: #fdfdf6;
}

p:nth-child(2) {
    background-color: #f3fbff;
}

For more information, see this w3schools.com link.

Add new comment

The content of this field is kept private and will not be shown publicly.

Anonymous format

  • Allowed HTML tags: <em> <strong> <cite> <code> <ul type> <ol start type> <li> <pre>
  • Lines and paragraphs break automatically.
By submitting this form, you accept the Mollom privacy policy.