CSS even/odd row selectors (zebra striping)

By Alvin Alexander. Last updated: June 4, 2016

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.

design

CSS even/odd row selectors (zebra striping)

books by alvin