Удалить последний разделитель из меню

Question

Я создаю меню в Joomla (не беспокойтесь, если вы не знаете, Joomla, этот вопрос связан с HTML-CSS).

Между каждым меню есть разделитель (like "|").

thisмой код также на 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;
}

Теперь проблема в том, что этот CSS помещает разделитель в правой части менюи я не хочу последний разделитель (не хочу справа самого разделителя), как я могу?любой селектор CSS?

Answer 1

Вы можете использовать объявление CSS3 last-child для нацеливания на последний элемент в вашем меню, например:

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

Предоставлено, что не очень поддерживается в старых браузерах, в этом случае вы можете просто настроить таргетингкласс пункта меню и уберите границу оттуда.Вы можете взглянуть на источник своей страницы и взглянуть на класс, автоматически добавленный joomla для этого пункта меню, например, item-24, item-23 и т. Д., И просто сделать это:

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

Answer 2

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

Но это не будет работать в т. Е. <8. Если вы хотите поддержать также ie7, поместите границу слева, а затем </p>

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

Если вы хотите поддерживать ie6, вы должны добавить класс или стиль к последнему (вы можете использовать уравнение jQuery для его исправления).

Answer 3

вы должны установить первое td:first-child

:first-child работает во всех браузерах!

#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;

}

образец скрипки

Answer 4

       #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;

}

Answer 5

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

Answer 6

Удалить границу с #footerlinks .module td a и добавить это

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