jQuery + Css - Adding css dynamically to list items

Question

I am wondering if there is a way to select list items an incrimentally add a css value as the list goes on. It is hard to explain so let me show and example: ```

``` I would like to take a dynamically generated list like this and ```

``` I'm not sure if this is best done with jQuery, or if there is a type of CSS selector I don't know about that could pull this off. If I were to use jQuery, i think it might go something like this: ``` $('.list > li:nth-child(2)').css('left', '+=10px').next ``` But I am not sure how to scrub through the rest of the list and keep adding 10px every time. I've been playing the the idea of using '.next' and '.prev' but am unsure how to execute. Thanks in advance for your patience, I'm a novice at jQuery.

Accepted Answer

You can use `each` and the index parameter as a control. I used margin-left here for my example, but obviously just left will work in your case also.

http://jsfiddle.net/nEePk/

```
$('li').each( function(index) {
    $(this).css('margin-left', index * 10);
});​
```

As far as a CSS only means, I don't think this will be possible. The reason is that there is no math that can be done in the actual expression. You can certainly select each `li` using the immediate sibling selector though.

```
li ~ li { ... } 
```

jQuery + Css - Adding css dynamically to list items

Solution

Problem