Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS How to change the last menu item coding in a list?

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #148662
    Provene
    Participant

    Hi guys. Hope this isn’t a dumb question, I’m very much a self-taught web blunderer! I’m doing a menu with a white right border to create a seperate line between each item, but would like to be able to lose the white line for the last menu item.

    I have tried making a ‘last’ class, but it doesn’t seem to work.

    http://www.marketingconnections.biz/bruntons2013/test1.html

    Any help would be very much appreciated. (In lots of ways, but for now we’ll start with this!)

    #148664
    Senff
    Participant

    You can target the last item easily by using:

    ul.MenuBarHorizontal li:last-child {
        border-right:0;
    }
    

    However, you might want to give all the listitems a LEFT border (instead of right) and then target the FIRST item (li:first-child) to have no border. This is because older versions of Internet Explorer do understand first-child but not last-child.

    #148696
    Provene
    Participant

    Thanks for the info on last child/first child. Hadn’t realised, that although with IE…………! I’ve made the border left as suggested, but the first border is still there. Is this one of those ‘cascade’ issues do you think?

    http://www.marketingconnections.biz/bruntons2013/test1.html

    #148698
    Ed
    Participant

    This will achieve what you want:

    ul.MenuBarHorizontal li:first-child {
        border-left: none;
    }
    

    If you want it to support old IE, you could just add a class .first to the first li, and then use this CSS instead of the above:

    ul.MenuBarHorizontal li.first {
        border-left: none;
    }
    

    Hope I’ve helped you!

    #148699
    Senff
    Participant

    You have this:

    ul.MenuBarHorizontal a li:first-child {
        border-right:0;
    }
    

    Two mistakes you made. First, the “a” shouldn’t be there. Second, you should set border-LEFT to 0, not border-RIGHT. This would be the correct declaration:

    ul.MenuBarHorizontal li:first-child {
        border-left:0;
    }
    
    #148702
    Provene
    Participant

    Thank you Senff, what a dolt I am!! Sometimes when you look and look at a thing, you just don’t see it! Perfect. Thank you all so much for your help and advice. It’s good to know where to come when you are having ‘one of those days’.

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.