...

View Full Version : applying a specific style to the last item in an unordered list



po3
07-20-2007, 03:19 PM
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.

BWiz
07-20-2007, 04:13 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.

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?...

po3
07-20-2007, 05:44 PM
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).

po3
07-20-2007, 05:58 PM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum