If I'm using the following css, is there a way to apply a specific style only to the last element in my unordered list? For instance what if I want to give that last element a margin-right value of 40px.
ul.nav {padding:0px; list-style-type:none;}
ul.nav li {display:inline;}
ul.nav li a {
float:right;
display:block;
width:70px;
height:20px;
margin-top: 70px;
margin-bottom: 5px;
vertical-align: bottom;
}
I realize I could write another class like:
ul.navLast li {margin-right:40px;}
I was just wondering if there is another way.
thanks in advance.
Not that I know of. Through CSS, you'll have to create and employ you're own id for the last li in the list. FYI, if you're using this 'class' that you're only going to use once, you should change it to an id.
rmedek
07-20-2007, 04:43 PM
FYI, if you're using this 'class' that you're only going to use once, you should change it to an id.
Why?...
thanks guys. isn't there a selector for "first"?
VIPStephan
07-20-2007, 05:51 PM
[…] is there a way to apply a specific style only to the last element in my unordered list?
Actually the :last-child (http://www.w3.org/TR/2001/CR-css3-selectors-20011113/#last-child-pseudo) pseudo class is supposed to be responsible for that but it’s not implemented very well so browser support for that is poor at least. You can do it with JavaScript, though. If that’s not an option or too complicated for one list that wll never change then applying a class or ID to the last element is the option (and it’s most widely supported).
VIPStephan, thanks fro the info:thumbsup:
Arbitrator
07-21-2007, 05:03 PM
Not that I know of. Through CSS, you'll have to create and employ you're own id for the last li in the list. FYI, if you're using this 'class' that you're only going to use once, you should change it to an id.In this case, I would opt for the class name “last”. Regardless of whether or not you will use this on more than one occasion, multiple elements can be last children, so a class name seems more appropriate than an ID.
#nav .last { …
thanks guys. isn't there a selector for "first"?The first-child pseudo‐class does that.
croatiankid
07-21-2007, 07:23 PM
The first-child pseudo‐class does that.
And, in case you didn't catch the drift yet, it has similar browser support as last-child (poor, that is).
Arbitrator
07-22-2007, 08:28 AM
And, in case you didn't catch the drift yet, it has similar browser support as last-child (poor, that is).The level of support isn’t really similar. last-child is supported by Gecko (Firefox and Netscape) while first-child is supported by Gecko, Trident (Internet Explorer 7), Presto (Opera), and WebKit (Safari). In other words, the former is supported by one major rendering engine whereas the latter is supported by the latest versions of all of them.