Can i apply CSS based on index?

Question

Lets say i have 50 element grid. If its wide list it is easy for readers if i color odd and even div differently. Now lets say i want to do this and color code every 5th div. Is there a way to choose which css to apply based on a number? like instead of

<div class="odd">blah</div>
<div class="even">blah</div>
<div class="odd">blah</div>
<div class="even">blah</div>
<div class="fifthOdd">blah</div>
...
<div class="fifthEven">blah</div>

to do something like

<div class="1">blah</div>
<div class="2">blah</div>
...
<div class="5">blah</div>
...
<div class="10">blah</div>

and allow whoever writing the css to choose how the color scheme works based on their index?

Answer 1

CSS has no way of selecting based on a class name that changes like that.

There are various nth-selectors proposed for CSS 3, but browser support is currently weak.

Answer 2

Yes, with nth-child. Note that nth-child doesn't work in IE, but it is a valid jQuery selector, so you can either use this with modern browsers and pure CSS, or with all browsers and a bit of presentational JavaScript.

Answer 3

Assuming you can actually use numbers as css classnames, the css could look like

div.1, div.3, div.5, div.7
{
// Odd Style here
}

div.2, div.4, div.6, div.8
{
// Even Style here
}

Not that pretty, but flexible enough to do what you ask.

Answer 4

You can use jQuery to select all even or odd nodes, and then apply a css class to them.

http://api.jquery.com/nth-child-selector/

$('#parentDiv:nth-child(even)').addClass('evenDivs');
$('#parentDiv:nth-child(odd)').addClass('oddDivs');