Zebra List

by Taufik Nurrohman

HTML

<ul class="css">
    <li><a href="#">Lorem</a></li>
    <li><a href="#">Ipsum</a></li>
    <li><a href="#">Dolor</a></li>
    <li><a href="#">Sit</a></li>
    <li><a href="#">Kebelet Pipis</a></li>
</ul>

<ul class="jquery">
    <li><a href="#">Lorem</a></li>
    <li><a href="#">Ipsum</a></li>
    <li><a href="#">Dolor</a></li>
    <li><a href="#">Sit</a></li>
    <li><a href="#">Kebelet Pipis</a></li>
</ul>

CSS

body {padding:50px;font:bold 16px 'Trebuchet MS',Arial,Sans-Serif;}

ul li a {color:brown;text-decoration:none;}

/* CSS */
ul.css li:nth-child(even) a {color:green;}

/* JQuery */
ul.jquery li.genap a {color:green;}

/* HOVER */
ul li:hover a,
ul li:nth-child(even):hover a,
ul li.genap:hover a {color:orange;}

JavaScript

$('.jquery li:even').addClass('genap');