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.
Solution 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;
}
OTHER TIPS
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%"})
});