Making a list flush on the right and left using a Pseudo Class and jQuery. by Christopher Muench
When building the Famous Interactive site I ran into a list of elements that I wanted to have flush on the right and left.
Making it flush on the left is easy. Don’t use left margin/padding (duh), but what about the right? I wanted to use the styling on other parts of the site.
Well, you can then use the CSS pseudo class of :first-child (css2, IE won’t get it unless you declare a DOCTYPE, which you should be using) and set your margin/padding to the left.
ul li
{
margin:0 0 0 5px;
}
ul li:first-child
{
margin:0 0 0 0;
}
There is the CSS3 pseudo class of :last-child (does not work in all browsers yet).
ul li
{
margin:0 5px 0 0;
}
ul li:last-child
{
margin:0 0 0 0;
}
or you can use jQuery to do all the magic (which will work in all browsers…and is your friend).
$(document).ready(function() {
$("ul li:last-child")
.css("margin-right", "0")
});
I ended up using the jQuery version (because it is my friend). We didn’t need it on the whole site so it was easier for me to place the jQuery script on the foot of the page I wanted it on.
This only works if the list is one line, but you can use the :nth-child pseudo class too for multi-line lists…read more here
