Andy_Read's sandbox: Rainbow

This module concept is simple, small and specific.

It extends the concept of zebra striping, which allows odd/even alternation of styles to be applied to lists or table rows.

The Rainbow module will insert classes to allow cyclic styling of lists or table rows.

This is simple in principle, but requires experimentation to determine how to control which lists and tables it's applied to and what the size of the cycle will be in each case, e.g. a 3-colour cycle or a 7-colour full rainbow!

Feature suggestions welcome.

Limited time is available for development of this module, so co-developers/maintainers welcome.

Comparison with CSS3 nth-child selector

CSS3 defines the nth-child selector, which can achieve the same effect as this module:

li:nth-child(3n+1) { background-color: red; }
li:nth-child(3n+2) { background-color: green; }
li:nth-child(3n) { background-color: blue; }

This works great on all 'modern' browsers, but unfortunately IE 8 and below do not support this, which would cut out ~35% of users (as at Jul 2011). CSS3PIE is a great utility for emulating some useful CSS3 properties in IE, but it cannot help with CSS3 selectors.