menu - CSS: Cancelling properties at the start and end of a list -
I have a menu list. I am not using UL / Lie, just nested div is the menu item between the graphic The separator is the first item in the list needs to suppress the left padding; The last item needs to press the correct padding and graphic separator. Here's the CSS:
.platformItem {float: left; Padding: 0 12px; Background: URL (/includes/themes/22RWO/images/assets/separator.gif) No-repeat top right; } .PlastMythm. First {padding-left: 0! Important; } .platformItem .last {padding-right: 0! Important; Background image: None! Important; }
And here is HTML:
& lt; Div id = "platform menu" & gt; & Lt; Div class = "platformItem first" & gt; & Lt; A href = "" & gt; All & lt; / A & gt; & Lt; / Div & gt; & Lt; Div class = "platformItem" & gt; & Lt; A href = "" & gt; Windows & lt; / A & gt; & Lt; / Div & gt; & Lt; Div class = "platformItem" & gt; & Lt; A href = "" & gt; Mac & lt; / A & gt; & Lt; / Div & gt; & Lt; Div class = "platformItem" & gt; & Lt; A href = "" & gt; Linux & lt; / A & gt; & Lt; / Div & gt; & Lt; Div class = "platformItem last" & gt; & Lt; A href = "" & gt; Web & lt; / A & gt; & Lt; / Div & gt; & Lt; Div class = "clear" & gt; & Lt; / Div & gt; & Lt; / Div & gt;
I was hoping that I could suppress some properties using the modifier classes. Is this possible? Is there a better way to do this?
Thx.
You can use the pseudo selector in the modern browser, though. You can also see:
$ (document) .ready (function () {
$ ("div span: last-child") .css ({ Color: "red", font-size: "80%"})});
Comments
Post a Comment