Pure CSS – Alternate Background Colors for List Items
Really simple! Apply the CSS rules to odd or even – li – elements.
Traduzione in italiano:
odd -> dispari -> applica la regola agli elementi figli dispari – Element 1,3,5 etc… –
even -> pari -> applica la regola agli elementi figli pari – Element 2,4,6 etc… –
<!DOCTYPE html>
<html>
<!-- Don't Break My b***s - Gimme Code! Project -->
<!-- Author: Andrea Tonin - http://blog.lucedigitale.com -->
<!-- This code come with absolutely no warranty -->
<!-- If you use this code in your project please give a link to http://blog.lucedigitale.com -->
<!-- Thanks in advance -->
<head>
<title>Pure CSS - Alternate Background Colors for List Items</title>
<style type="text/css">
#examplelist li:nth-child(odd)
{
background:#AFAFFF;
}
#examplelist li:nth-child(even)
{
background:#AFFFC7;
}
</style>
</head>
<body>
<!-- unhordered list START -->
<ul id="examplelist">
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
<li>Element 4</li>
<li>Element 5</li>
<li>Element 6</li>
</ul>
<!-- unhordered list END -->
</body>
</html>
Here the result:
- Element 1
- Element 2
- Element 3
- Element 4
- Element 5
- Element 6
