CSS: Cancelling properties at the start and end of a list

Question

I have a menu list. I'm not using UL/LI, just nested DIV's. There are graphic separators between the menu items. The first item in the list needs to suppress the left padding; the last item needs to suppress the right padding and the graphic separator. Here's the CSS:

.platformItem {
  float: left;
  padding: 0 12px;
  background: url(/includes/themes/02RWO/images/assets/separator.gif) no-repeat top right;
}
.platformItem .first {
  padding-left: 0 !important;
}
.platformItem .last {
  padding-right: 0 !important;
  background-image: none !important;
}

And here's the HTML:

<div id="platformMenu">  
  <div class="platformItem first"><a href="">All</a></div>
  <div class="platformItem"><a href="">Windows</a></div>
  <div class="platformItem"><a href="">Mac</a></div>
  <div class="platformItem"><a href="">Linux</a></div>
  <div class="platformItem last"><a href="">Web</a></div>
  <div class="Clear"></div>
</div>

I was hoping I could do the suppression of certain properties using modifier classes. Is this possible? Is there a better way to do this?

Thx.

Answer 1

You can use first-child pseudo-selector in modern browsers. last-child isn't supported in IE7 or IE8, though. You can also look at jQuery's enhanced selectors:

$(document).ready(function(){

$("div span:last-child")
    .css({color:"red", fontSize:"80%"})
});

Answer 2

Didn't need JS after all. .first and .last aren't downstream from .platformItem, but from #platformMenu. (I should've seen this.) New code:

#platformMenu .first {
  padding-left: 0 !important;
}
#platformMenu .last {
  padding-right: 0 !important;
  background-image: none !important;
}