Zebra stripes with jQuery and CSS

Creating zebra stripes with CSS and jQuery. CSS will be used for the classes (odd and even rows) and jQuery to add the classes.

Demo(styled) Source

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

.zebra_odd {
		background-color: #ABD5E0;
	}
.zebra_even {
		background-color: #38A7CB;
	}

$(document).ready(function() {

	$('ul li:odd').addClass('zebra_odd');
	$('ul li:even').addClass('zebra_even');

});

That’s it. Quite easy isn’t it.

Related posts: