css tricks for non web designers

Those are some CSS tricks i’ve been used or testing all around the web. I think it’s good to share this for all the non webdesigners around.

Apply alternate CSS Class Background Color on List items

If you are generating dynamically rows for a list item, perhaps you’re styling a table or a form and each row you use the <UL><LI> tags.
You can automatically apply a class to the odd elements of the list in two ways.

CSS3 method

The CSS3 method is the most simple. I just add the .alternate class to my UL tag and then i add the following CSS snippet:

ul.alternate li:nth-child(odd) { background: #F8F8F8; }
ul.alternate li:nth-child(even) { background: #E8E8E8; }

Jquery method

The JQuery method is good for browsers that does not support the CSS3 way. Add the following code to your document ready function:

$('ul.alternate li:odd').addClass('oddrow');
$('ul.alternate li:even').addClass('evenrow');