Forums

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

Home Forums Other Add special character after all links in footer except last

  • This topic is empty.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #33838
    digitalvaldosta
    Participant

    I am trying to add a pipe between each link in my client’s footer. Found a partial solution by using :after pseudo selector. This, however, adds a pipe character after the last link as well and can not figure out how to remove from the last. Attempted to use :last-child to remove the character, didn’t affect anything. Here is the css that I am using:

    #foot-nav a:after {
    content: " | ";
    }

    I don’t mind if this is in php or css3 (rather not javascript). Any help on this would be great.

    #84636
    TheDoc
    Moderator

    I think you can double up pseudo-selectors. Something like this:

    #foot-nav a:last-child:after {
    content: " ";
    }
    #84637
    TheDoc
    Moderator

    Yes indeedy, worked like a charm: http://jsfiddle.net/7EDhC/

    #84647
    bhagavan
    Participant

    I think its not working in all browsers.
    Any how Nice thing.

    #84648

    Another option, just to decrease the amount of code written, is to use nth-child:

    #foot-nav a:nth-child(n+2):before {
    content: ' | ';
    }

    But just like last-child it won’t work in older IE.

    #84649
    jamygolden
    Moderator
    #foot-nav a:before {content: " | "; }
    #foot-nav a:first-child:before{content: ''; }

    Works down to IE8

    #84667
    TheDoc
    Moderator

    @jamy_za – very nice. I remember we had used that solution on another problem in the forum before, totally forgot about it!

    #84710
    jamygolden
    Moderator

    @TheDoc yeah, it’s very handy. I do something like that about two (or more) times every project I work on. This example obviously won’t work in LTE IE7 due to :before, but the fact that IE7 (semi) supports :first-child really makes my life a lot easier lol.

    #86795
    digitalvaldosta
    Participant

    Is it possible to use php to solve the whole cross browser issue?

    #86798
    jamygolden
    Moderator

    The only cross browser issue is IE6.

    But you could do it with jQuery pretty easily.

    $('#foot-nav a').before(' | ');
Viewing 10 posts - 1 through 10 (of 10 total)
  • The forum ‘Other’ is closed to new topics and replies.