If you add a background color on every other table row, you will get a nice zebra stripes effect.
To style every other table row element, use the :nth-child(even) selector like this:
Pseudo-class :nth-child()
The :nth-child() pseudo-class represents an element that has an+b siblings before it in the document tree, for any positive integer or zero value of n, and has a parent element.
Syntax
selector:nth-child(an+b){ properties }
- The examples of an+b are as follows:
- :nth-child(2n) /* represents every even element */
- :nth-child(even) /* same, represents every even element */
- :nth-child(2n+1) /* represents every odd element */
- :nth-child(odd) /* same, represents every odd element */
- :nth-child(10n-1) /* represents the 9th, 19th, 29th, etc, element */
Live Demo & Try it yourself!
Output
Note: If you use (odd) instead of (even), the styling will occur on row 1,3,5 etc. instead of 2,4,6 etc.
n can be a number, a keyword (odd or even), or a formula (like an + b).
