#todayilearned

by @jm3 · aka John Manoogian3

Frequent, bite-size mini-milestone updates as I fast-forward merge* my front-end web development skills up to 2019 levels. Learn more

Using the "even" and "odd" keywords in CSS selectors

Posted at — Jun 3, 2019

This matches the odd childen of TR (table rows), presumably TDs (table cell data), for “zebra-row” styling of alternating elements.

/* select the odd children of TR */
tr:nth-child(odd) {
  ...
}

/* guess lol */
tr:nth-child(even) {
  ...
}

Notably, because of the CSS cascade, you may not often need even and odd, because you can just apply one style to all rows, and then override just the even rows with nth-child(even), giving an even / odd result. ¯\_(ツ)_/¯