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.

Share it!

There’s just one person behind this website; if this article was helpful (or interesting), I’d appreciate it if you’d share it. Thanks, Al.

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.