Read the CSS selectors – the basics tutorial for a primer on selectors first.
I love that CSS3 allows the zebra-striping of tables using the nth-child() selector. Achieving this in plain HTML is a messy manual process that must be repeated should the contents/row order of the table change. The CSS solution is far easier to implement. The nth-child() selector can be a number, a keyword, or a formula.
See the Pen Zebra-striping table using CSS3 by David Fox (@foxbeefly) on CodePen.
Read more about the CSS’s :nth-child() selector here: https://www.w3schools.com/cssref/sel_nth-child.asp
References:
- W3schools (No date) CSS :nth-child() Selector. Available at: https://www.w3schools.com/cssref/sel_nth-child.php (Accessed: 4 March 2024).