CSS styling alternating items, rows or columns using nth-child

The nth-child CSS psuedoclass allows you to apply a style to child elements in lists, such as <li> items or table <tr> rows or <td> cells.

I’ve been working on a React frontend client to a Sudoku puzzle solver which is deployed as am AWS Lambda. It’s easy to build a table of <input> fields, but how can you styles that alternate only every 3 elements?

nth-child is perfect for this. First, you can specify the repeating style every nth element, starting with a thick border every 3 <td> cells : nth-child(3n):

/* right border for every 3rd td */
 .sudoku-grid tbody tr td:nth-child(3n){
   border-right: 3px solid;
 }

This results in this:

To handle the first column, you can apply a style to a specific element only, with:

/* set 1st column left border */
 .sudoku-grid tbody tr td:nth-child(1){
   border-left: 3px solid;
 }

This gives:

Now similarly for the <tr> rows, every 3rd row:

 /* bottom border for every 3rd tr row */
 .sudoku-grid tbody tr:nth-child(3n){
   border-bottom: 3px solid;
 }

And 1st row, now we’re done!

/* top border for first row */
  .sudoku-grid tbody tr:nth-child(1){
    border-top: 3px solid;
  }