Remove last separator from menu

I'm creating menu in joomla (do not concern yourself should you not know joomla this is HTML-CSS related).

There's separator(like "|") in between each menu.

this really is my code also on jsfiddle http://jsfiddle.net/WRuTC/

HTML

<div id="footerlinks">        <div class="module">
            <div>
                <div>
                    <div>
                                            <table width="100%" cellspacing="1" cellpadding="0" border="0"><tbody><tr><td nowrap="nowrap"><a class="mainlevel" href="/Parthvi/joomla/WLB/index.php?option=com_content&amp;view=article&amp;id=1&amp;Itemid=11">HOME</a><a class="mainlevel" href="/Parthvi/joomla/WLB/index.php?option=com_content&amp;view=article&amp;id=1&amp;Itemid=12">ABOUT WLB</a><a class="mainlevel" href="/Parthvi/joomla/WLB/index.php?option=com_content&amp;view=article&amp;id=1&amp;Itemid=13">KEY PERSONNEL</a><a class="mainlevel" href="/Parthvi/joomla/WLB/index.php?option=com_content&amp;view=article&amp;id=1&amp;Itemid=14">CAPABILITIES</a><a class="mainlevel" href="/Parthvi/joomla/WLB/index.php?option=com_content&amp;view=article&amp;id=1&amp;Itemid=15">PROJECTS</a><a class="mainlevel" href="/Parthvi/joomla/WLB/index.php?option=com_content&amp;view=article&amp;id=1&amp;Itemid=16">CONTACT US</a></td></tr></tbody></table>                    </div>
                </div>
            </div>
        </div>

               </div>

CSS

    #footerlinks .module td a {
    border-right: 1px solid #79797A;
    color: #515152;
    font-size: 11px;
    line-height: 42px !important;
    padding-left: 7px;
    padding-right: 7px;
    text-decoration: none;
}

Now, the issue is this css puts separator at right side of menu, and that i don't want the final separator(not need right most separator) how do i ? any css selector?

html css joomla

you need to set the very first td:first-child

:first-child works in most browser!

#footerlinks .module td a {
    border-left: 1px solid #79797A;
    color: #515152;
    font-size: 11px;
    line-height: 42px !important;
    padding-left: 7px;
    padding-right: 7px;
    text-decoration: none;
}
#footerlinks .module td a:first-child {
    border-left: 0px solid #79797A;

}

fiddle sample

 #footerlinks .module td a:last-child{border:0}

But it won't operate in ie<8. If you would like support also ie7 place border on left after which

 #footerlinks .module td a:first-child{border:0}

If you wish to support ie6 you need to add class or style to last (you should use eq. jQuery for fixing it).

You should use CSS3's last-child declaration to focus on the final item in your menu, like so:

#footerlinks .module td a:last-child {
    border-right:none;
}

Granted, that's not highly supported in older browsers, by which situation you can easily concentrate on the menu-item class and take away the border after that. You are able to have a look in the supply of your page and have a look in the class added instantly by joomla for your food selection, e.g. item-24, item-23, etc.., and merely do that:

#footerlinks .module td .item-24 {
    border-right:none;
}

Remove border from #footerlinks .module td a and add this

#footerlinks .module td a + a { border-left:1px solid #79797A; }

#footerlinks .module td a:last-child {
   border-right: 0;
}

       #footerlinks .module td a {
    border-left: 1px solid #79797A;
    color: #515152;
    font-size: 11px;
    line-height: 42px !important;
    padding-left: 7px;
    padding-right: 7px;
    text-decoration: none;
}
#footerlinks .module td a.first-child {
    border-left: none;

}

Related