Question

I’ve got a HTML list which with the aid of CSS I’m arranging in blocks of rows of 3 columns.

So, if the list has 6 elements it would be 2 rows x 3 columns, 9 elements – 3 x 3, 12 elements – 4 x 3, etc, etc.

How do I using the CSS nth-child selector select the middle element of each row? ie., the 2nd, 5th, 8th, … elements.

Thanks in advance!

Answer 1

This should work:

:nth-child(3n+2) {
    // your css rules here
}

Basically, the 3n means “every third” while +2 means “starting with number two”.

Read more here: https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child