Is it possible to use the nth-child
with modulo? I know you can specify a formula, such as
nth-child(4n+2)
But I can't seem to find if there's a modulo operator. I've tried the following examples below, and none seem to work:
nth-child(n%7)
nth-child(n % 7)
nth-child(n mod 7)
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.
nth-of-type() SelectorThis selector is used to style only those elements that are the nth number of child of its parent element. This selector is used to style only those elements that are the nth number of child of its parent element.
Use the querySelector() method to get the nth child of an element, e.g. document. querySelector('#parent :nth-child(3)') . The :nth-child pseudo class returns the element that matches the provided position.
You can use “tag:nth-child(n)”. It will select the nth child.
If you want to use nth-child
with modulo k
, just specify:
nth-child(kn)
For example, if you want to specify style for 3, 6, 9, .. elements, just specify (k
= 3), and use:
nth-child(3n)
You can also specify an offset:
nth-child(kn+offset)
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