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;
}

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.