Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    po3
    po3 is offline
    New Coder
    Join Date
    Apr 2007
    Posts
    75
    Thanks
    16
    Thanked 0 Times in 0 Posts

    applying a specific style to the last item in an unordered list

    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.

    Code:
    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:
    Code:
    ul.navLast li {margin-right:40px;}
    I was just wondering if there is another way.

    thanks in advance.

  • #2
    Regular Coder BWiz's Avatar
    Join Date
    Mar 2006
    Location
    Sol System
    Posts
    471
    Thanks
    7
    Thanked 21 Times in 21 Posts
    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.
    BWiz :: Happy Coding!
    2006
    2007 2008 2009
    2010 2011
    Irrational numbers make no sense.

  • #3
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Quote Originally Posted by BWiz View Post
    FYI, if you're using this 'class' that you're only going to use once, you should change it to an id.
    Why?...

  • #4
    po3
    po3 is offline
    New Coder
    Join Date
    Apr 2007
    Posts
    75
    Thanks
    16
    Thanked 0 Times in 0 Posts
    thanks guys. isn't there a selector for "first"?

  • #5
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,642
    Thanks
    6
    Thanked 1,005 Times in 978 Posts
    Quote Originally Posted by po3 View Post
    […] is there a way to apply a specific style only to the last element in my unordered list?
    Actually the :last-child 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).

  • #6
    po3
    po3 is offline
    New Coder
    Join Date
    Apr 2007
    Posts
    75
    Thanks
    16
    Thanked 0 Times in 0 Posts
    VIPStephan, thanks fro the info

  • #7
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,300
    Thanks
    28
    Thanked 275 Times in 269 Posts
    Quote Originally Posted by BWiz View Post
    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.

    Code:
    #nav .last { …
    Quote Originally Posted by po3 View Post
    thanks guys. isn't there a selector for "first"?
    The first-child pseudo‐class does that.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #8
    Regular Coder croatiankid's Avatar
    Join Date
    Jan 2006
    Posts
    665
    Thanks
    1
    Thanked 12 Times in 12 Posts
    Quote Originally Posted by Arbitrator View Post
    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).

  • #9
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,300
    Thanks
    28
    Thanked 275 Times in 269 Posts
    Quote Originally Posted by croatiankid View Post
    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.
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •