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');

Potrebbe interessarti anche:

Iscriviti alla newsletter

  • HowTo e Tutorial su Linux e Ubuntu
  • Wordpress, Perl & Webmin
  • VoIP, Asterisk, SIP
About

Antonio Gallo is a Linux entusiast and evangelists since 1996 when he started the Bad Penguin project. Notably he was in the board and sysadmin of linux.it for many years and also managed the "Linux Day" event in Italy, wrotes for technical magazines. Antonio writes, codes and develops Linux and Open Source software solutions. When everybody else fails he's the man to be called: bash, awk, php, perl, C are the rabbits in his cylinder ready to spread the Linux magic around the world.