Select every Nth element in CSS

by

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:

<body>
  <h1></h1>
  <div>1</div>  <div>2</div>
  <div>3</div>  <div>4</div>
  <h2></h2>
  <div>5</div>  <div>6</div>
  <div>7</div>  <div>8</div>
  <h2></h2>
  <div>9</div>  <div>10</div>
  <div>11</div> <div>12</div>
  <h2></h2>
  <div>13</div> <div>14</div>
  <div>15</div> <div>16</div>
</body>

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.

More Related Contents:

  1. how do I make device specific selectors in css [closed]
  2. Is there a “previous sibling” selector?
  3. Which characters are valid in CSS class names/selectors?
  4. What does a space mean in a CSS selector? i.e. What is the difference between .classA.classB and .classA .classB?
  5. CSS selector for first element with class
  6. What does the “+” (plus sign) CSS selector mean?
  7. CSS Selector that applies to elements with two classes
  8. CSS selector for “foo that contains bar”? [duplicate]
  9. How to use JSF generated HTML element ID with colon “:” in CSS selectors?
  10. What does an asterisk (*) do in a CSS selector?
  11. CSS selector based on element text? [duplicate]
  12. Handling a colon in an element ID in a CSS selector [duplicate]
  13. How can I select an nth child without knowing the parent element?
  14. Can I use variables for selectors?
  15. How to select label for=”XYZ” in CSS?
  16. CSS: styled a checkbox to look like a button, is there a hover?
  17. In which direction do selector engines read, exactly?
  18. What’s the difference between html[lang=”en”] and html:lang(en) in CSS?
  19. Is it possible to select the last n items with nth-child?
  20. CSS property value from class name
  21. Can I colour backgrounds of selected items in HTML select options with CSS only?
  22. LESS CSS: abusing the & Operator when nesting?
  23. CSS3 combining selectors with OR instead of AND
  24. Why doesn’t this CSS :not() declaration filter down?
  25. Angular 2: How to style host element of the component?
  26. How do I select an element only when inside another element?
  27. How to show the first N elements of a block and hide the others in css?
  28. How do I apply a style to all children of an element
  29. What is the difference between :before and ::before?
  30. What is the difference between pseudo-classes and pseudo-elements?

Leave a Comment