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! | Read More » » |
