Select every Nth element in CSS

Question

Is it possible to select  say  every fourth element in a set of elements   Ex  I have 16  lt div gt  elements    I could write something like   div nth-child 4   div nth-child 8   div nth-child 12   div nth-child 16    is there a better way to do this

User · Answer

You need the correct argument for the nth-child pseudo class    The argument should be in the form of an   b to match every ath child starting from b   Both a and b are optional integers and both can be zero or negative    If a is zero then there is no  every ath child  clause  If a is negative then matching is done backwards starting from b  If b is zero or negative then it is possible to write equivalent expression using positive b e g  4n 0 is same as 4n 4  Likewise 4n-1 is same as 4n 3     Examples   Select every 4th child  4  8  12         x000D   x000D  li nth-child 4n    x000D    background  yellow  x000D    x000D   lt ol gt  x000D     lt li gt Item lt  li gt  x000D     lt li gt Item lt  li gt  x000D     lt li gt Item lt  li gt  x000D     lt li gt Item lt  li gt  x000D     lt li gt Item lt  li gt  x000D     lt li gt Item lt  li gt  x000D     lt li gt Item lt  li gt  x000D     lt li gt Item lt  li gt  x000D     lt li gt Item lt  li gt  x000D   lt  ol gt  x000D   x000D   x000D    Select every 4th child starting from 1  1  5  9         x000D   x000D  li nth-child 4n 1    x000D    background  yellow  x000D    x000D   lt ol gt  x000D     lt li gt Item lt  li gt  x000D     lt li gt Item lt  li gt  x000D     lt li gt Item lt  li gt  x000D     lt li gt Item lt  li gt  x000D     lt li gt Item lt  li gt  x000D     lt li gt Item lt  li gt  x000D     lt li gt Item lt  li gt  x000D     lt li gt Item lt  li gt  x000D     lt li gt Item lt  li gt  x000D   lt  ol gt  x000D   x000D   x000D    Select every 3rd and 4th child from groups of 4  3 and 4  7 and 8  11 and 12         x000D   x000D     two selectors are required    x000D  li nth-child 4n 3   x000D  li nth-child 4n 4    x000D    background  yellow  x000D    x000D   lt ol gt  x000D     lt li gt Item lt  li gt  x000D     lt li gt Item lt  li gt  x000D     lt li gt Item lt  li gt  x000D     lt li gt Item lt  li gt  x000D     lt li gt Item lt  li gt  x000D     lt li gt Item lt  li gt  x000D     lt li gt Item lt  li gt  x000D     lt li gt Item lt  li gt  x000D     lt li gt Item lt  li gt  x000D   lt  ol gt  x000D   x000D   x000D    Select first 4 items  4  3  2  1    x000D   x000D     when a is negative then matching is done backwards     x000D  li nth-child -n 4    x000D    background  yellow  x000D    x000D   lt ol gt  x000D     lt li gt Item lt  li gt  x000D     lt li gt Item lt  li gt  x000D     lt li gt Item lt  li gt  x000D     lt li gt Item lt  li gt  x000D     lt li gt Item lt  li gt  x000D     lt li gt Item lt  li gt  x000D     lt li gt Item lt  li gt  x000D     lt li gt Item lt  li gt  x000D     lt li gt Item lt  li gt  x000D   lt  ol gt  x000D   x000D   x000D

User · Answer

As the name implies   nth-child   allows you to construct an arithmetic expression using the n variable in addition to constant numbers  You can perform addition      subtraction  -  and coefficient multiplication  an where a is an integer  including positive numbers  negative numbers and zero    Here s how you would rewrite the above selector list   div nth-child 4n    For an explanation on how these arithmetic expressions work  see my answer to this question  as well as the spec   Note that this answer assumes that all of the child elements within the same parent element are of the same element type  div  If you have any other elements of different types such as h1 or p  you will need to use  nth-of-type   instead of  nth-child   to ensure you only count div elements    lt body gt     lt h1 gt  lt  h1 gt     lt div gt 1 lt  div gt    lt div gt 2 lt  div gt     lt div gt 3 lt  div gt    lt div gt 4 lt  div gt     lt h2 gt  lt  h2 gt     lt div gt 5 lt  div gt    lt div gt 6 lt  div gt     lt div gt 7 lt  div gt    lt div gt 8 lt  div gt     lt h2 gt  lt  h2 gt     lt div gt 9 lt  div gt    lt div gt 10 lt  div gt     lt div gt 11 lt  div gt   lt div gt 12 lt  div gt     lt h2 gt  lt  h2 gt     lt div gt 13 lt  div gt   lt div gt 14 lt  div gt     lt div gt 15 lt  div gt   lt div gt 16 lt  div gt   lt  body gt    For everything else  classes  attributes  or any combination of these   where you re looking for the nth child that matches an arbitrary selector  you will not be able to do this with a pure CSS selector  See my answer to this question     By the way  there s not much of a difference between 4n and 4n   4 with regards to  nth-child    If you use the n variable  it starts counting at 0  This is what each selector would match    nth-child 4n   4 0    0 4 1    4 4 2    8 4 3    12 4 4    16        nth-child 4n 4   4 0    4   0    4   4 4 1    4   4    4   8 4 2    4   8    4   12 4 3    4   12   4   16 4 4    4   16   4   20       As you can see  both selectors will match the same elements as above  In this case  there is no difference

User · Answer

div nth-child 4n 4     See  http   css-tricks com how-nth-child-works

User · Answer

Try this  div nth-child 4n 4

[css] Select every Nth element in CSS

Select every 4th child (4, 8, 12, ...)

Select every 4th child starting from 1 (1, 5, 9, ...)

Select every 3rd and 4th child from groups of 4 (3 and 4, 7 and 8, 11 and 12, ...)

Select first 4 items (4, 3, 2, 1)

Examples related to css

Examples related to css-selectors