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.