Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

nth-child with mod (or modulo) operator

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)
like image 865
jefflunt Avatar asked May 25 '11 16:05

jefflunt


People also ask

What is the nth child () selector used for?

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.

What's the difference between the nth of type () and Nth child ()?

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.

How do you find the nth child of an 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.

How do I select the nth child in CSS selenium?

You can use “tag:nth-child(n)”. It will select the nth child.


1 Answers

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)
like image 185
Athlan Avatar answered Sep 19 '22 04:09

Athlan