Question

Is there a way in CSS or JQuery where I can dynamically change the background of li tags so they get slightly lighter for each element until it gets to white?

For example say I had a list of 10 li elements. The first would have a red (#ff0000) background, the next one would then be a lighter shade of red, and so on and so on until we got to the last one which would have a background of white (#FFFFFF).

The list can be any length and I just want the background colour to go from one colour e.g. red to another colour e.g. white. My site uses jQuery so if I have to use that I don’t mind.

Thanks

Answer 1

This is relatively easy, assuming you can build a selector that grabs your list of <li> elements.

Something like this (code is untested):

// get all <li>'s within <ul id="my-list">
var items = $('#my-list li');

// the increment between each color change
var step = (255.0 / items.size());

items.each(function(i, e) {
    var shade = i * step;
    $(this).css("background-color", "rgb(255," + shade + "," + shade + ")");
});