Continuous nth-child (multiple occurrences)

Question

I have a list made of thousands of items.

In order to display them in a clean fashion, I need to apply a specific css rule to every third item of the list (3th li, 6th li, 9th li,....,3000th li..9999th li...).

Normally, I would use this:

li:nth-child(3),li:nth-child(6),...

but this would obviously be too tedious to write a css rule for each item (not to mention that the list may grow over time)

I also may use a class for every third item of the list but the list is reordered constantly according to a filter by a jQuery plugin (Quicksand), so the 6th li can asynchronously become the 4th one according to the user manipulation.

So, is there a way to use a css rule that would simply do something like this?:

li:nth-child(n*3)

Thank you.

since Hashem gave the answer, so there is no room for another answer.. just made a demo link. http://jsbin.com/qabofewo/2/ — Kheema Pandey, Mar 18 '14 at 14:04

Hashem Qolami · Accepted Answer · 2014-03-18T14:39:44.997

2

You could use the :nth-child(an+b) pseudo class as li:nth-child(3n+3) in order to select every third list item (a parameter) starting from 3rd <li> element (b parameter).

In which:

n starts from 0

n = 0: (3 * 0 + 3) = 3 => 3rd element
n = 1: (3 * 1 + 3) = 6 => 6th element
n = 2: (3 * 2 + 3) = 9 => 9th element
...

li:nth-child(3n+3) {
    background-color: gold;
}

Example Here. (Which is the same as li:nth-child(3n)).

From the MDN:

The :nth-child(an+b) CSS pseudo-class matches an element that has an+b-1 siblings before it in the document tree, for a given positive or zero value for n, and has a parent element.

It's worth noting that :nth-child pseudo-class is supported in IE9+.

edited Mar 18 '14 at 14:39

answered Mar 18 '14 at 14:00

Hashem Qolami

97,268
26
150
164

just curious is there any drawback if used `nth-of-type` in this example.. I choose `nth-of-type` to select every 3rd element. the demo is here. http://jsbin.com/qabofewo/2 – Kheema Pandey Mar 18 '14 at 14:08
@KheemaPandey Since the only valid child of list elements is `
`, `nth-of-type` behaves as the same as `:nth-child`.

Hashem Qolami

Mar 18 '14 at 14:11

1

I didn't know that "+1" thing but it makes sense.Thank you – Baylock Mar 18 '14 at 14:13

so you mean if any other HTML element added inside li then it won't work? – Kheema Pandey Mar 18 '14 at 14:13

@KheemaPandey By *list elements* I meant `

`/`

`.

– Hashem Qolami Mar 18 '14 at 14:17

Oops! I accepted the answer but didn't see that this solution is not supported by IE8. Is there a workaround for IE8 then? – Baylock Mar 18 '14 at 15:52

@Baylock For the [limited amount of elements](http://stackoverflow.com/questions/8492121/ie8-nth-child-and-before) you could use adjacent sibling selectors, but it's not possible to emulate such a `:nth-child(3n+3)` selector for unlimited elements. However, you might want to consider using [Selectivizr](http://stackoverflow.com/a/16873425/1725764) to get `nth-child` to work on **IE6-8** – Hashem Qolami Mar 18 '14 at 16:09

@Baylock You could also use **[IE7.js](https://code.google.com/p/ie7-js/)** JavaScript library. Check the [demo](http://ie7-js.googlecode.com/svn/test/nth-child.html). – Hashem Qolami Mar 18 '14 at 16:18

I'll go and have a look at both selectivizr and IE7.js, thank you. Any script is fine as long as it works on ie8 eventually (I decided not to support IE6 and IE7 anymore). – Baylock Mar 18 '14 at 22:15

Continuous nth-child (multiple occurrences)

1 Answers1