nth-child CSS - matching 2nd, 5th, 8th, ... elements [duplicate]

This question already has answers here: Select every Nth element in CSS (4 answers) Closed 7 years ago.

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 mid开发者_运维技巧dle element of each row? ie., the 2nd, 5th, 8th, ... elements.

Thanks in advance!

---

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

---

li:nth-child(3n+2) {
    //whatever you have to do
}

See this as a reference https://css-tricks.com/useful-nth-child-recipies/

---

If I understand your question correctly, :nth-child(3n+2) is what you want. (See e.g. this JSfiddle)