Menu
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!
994
Definition and Usage. The :nth-child(n) selector matches every element that is the nth child of its parent. n can be a number, a keyword (odd or even), or a formula (like an + b). Tip: Look at the :nth-of-type() selector to select the element that is the nth child, of the same type (tag name), of its parent.
The :nth-last-child(n) selector matches every element that is the nth child, regardless of type, of its parent, counting from the last child.
tr:nth-child(even) or tr:nth-child(2n) Represents the even rows of an HTML table: 2, 4, 6, etc. :nth-child(7) Represents the seventh element.
If a is equal to 3, that means that the CSS is applied to every third element. See below for p:nth-child(3n) . n is the counter used to determine which sibling element among the group is affected. By itself, it refers to every child element.
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
50
li:nth-child(3n+2) {
//whatever you have to do
}
See this as a reference https://css-tricks.com/useful-nth-child-recipies/
43
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
