Scenario: using lists to tackle a menu. Obvious need to eliminate the margin on the last item. Adding an extra class to the last item for the sake of old browsers?

<ul> <li>one</li> <li>two</li> <li>three</li> </ul>

1) Use last-child- CSS 3 selector (not supported in IE6 IE7 IE8*) If you're using the html5 boiler plate, you can tackle this by adding '.last' class to the last <li>. The html5 boilerplate has a series of statements detecting the IE browser version and applying the relevant class to the html tag. The benefit of this is it allows CSS fixes for specific IE version without needing to use hacks.

ul li{ list-style:none; float:left; margin-right:30px; } ul li:last-child{ margin-right:0; } .ie6 .last, .ie7 .last, .ie8 .last{ margin-right:0; }

2) Use first-child instead-CSS 2.1 selector (not supported in IE6*) Add '.first' class to the first <li> so we can target IE6 browser.

ul li{ list-style:none; float:left; margin-left:30px; } ul li:first-child{ margin-left:0; } .ie6 .first{ margin-left:0; }

3) Uses adjacent sibling selector-CSS 2.1 selector (not supported in IE6*) Add '.first' class to the first <li> so we can target IE6 browser.

ul li{ list-style:none; float:left; margin-left:30px; } ul li + li{ margin-left:0; } .ie6 .first{ margin-left:0; }

4)Use Selectivizr-javascript CSS3 selectors for IE http://selectivizr.com/ OR just simply use '.last' because the client cant wait for you to make up your mind ! Also note, that if you are using modenizr you can inherently 'detect' and tackle older browsers, i.e if your list has css3 gradients then, a graceful fallback would be (more here)