enavu webdevmania tutsvalley psdestination
visit the enavu network
No Comments Article Title Overlay Article Title

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.

DZoneDiggDesign FloatDeliciousBlinklistRedditFacebookGoogle BuzzTwitterStumbleUponTumblrShare

Demo(styled)     Source


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


.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:

  1. Hover effect with jQuery and CSS
  2. Automatic input field focus on page load
  3. Disabling right mouse click menu with jQuery
  4. Client side filtering data with jQuery
  5. Checking username availability with ajax using jQuery

Slobodan Kustrimovic

This author has yet to fill his BIO.

Did you absolutely LOVE this article... share it!


Leave your own!


freedcamp free project management

Popular Articles

fzilla file hosting