What if have a list created dynamically and you need to target each list with CSS? Since you can’t manually add a class to each list item you should use jQuery to automatically add a class to each list item.
Say your list looks like this:
<ul id="awesome-list"> <li>First Item</li> <li>Second Item</li> <li>Third Item</li> <li>Fourth Item</li> <li>Fifth Item</li> </ul>
Use the following jQuery:
$("#awesome-list > li").addClass(function(i){return "item" + (i + 1);});
The result will be:
<ul id="awesome-list"> <li class="item1">First Item</li> <li class="item2">Second Item</li> <li class="item3">Third Item</li> <li class="item4">Fourth Item</li> <li class="item5">Fifth Item</li> </ul>
Now you have a way to target each list item with CSS.
