Alternate Shading on a Table Row
Use this CSS style to shade every other row in a table or any repeating group of HTML elements. In the style, the "tr" selects the even table rows. You can use this css to select every other paragraph by changing the css to "p:nth-child(even)", or list items: li:nth-child(even), etc. Change "even" to "odd" if you want the shading to affect odd rows.
tr:nth-child(even) {
background-color:#f5f5f5
}
Example:
HTML
<!-- using the css above the table will appear as shown below -->
column 1 | column 2 |
---|---|
row 1, column 1 | row 1, column 2 |
row 2, column 1 | row 2, column 2 |
row 3, column 1 | row 3, column 2 |
row 4, column 1 | row 4, column 2 |
row 5, column 1 | row 5, column 2 |