css last ul styling

Question

Je voudrais ajouter un style différent à mon dernier élément ul avec le nom de la classe footer_list mais aucun des éléments suivants ne fonctionne

ul.footer_list:last-child {
    border-right: none;
}

#menu-bottom.pads ul.footer_list:last-child {
    border-right: none;
}

la structure se présente comme suit

<div class="pads clearfix" id="menu-bottom">
    <ul class="footer_list">
        <li><a title="" href=""></a></li>
    </ul>

    <ul class="footer_list">
        <li><a title="Zu den Dell Gutschein Codes" href="stackoverflow.com/dell-gutschein-codes/"></a></li>
    </ul>
    <ul class="footer_list">
        <div class="menu-footer-container">
            <ul class="menu" id="menu-footer">
                <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-25" id="menu-item-25"><a href=""></a></li>
            </ul>
        </div>
    </ul>
</div>

Answer 1

Vous pouvez également utiliser le pseudo-sélecteur "last-of-type".

.footer_list:last-of-type {
    border-right: none;
}

Answer 2

Vous utilisez le mauvais sélecteur. Plutôt que :

ul.footer_list:last-child {
    border-right: none;
}

Il devrait l'être :

.footer_list:last-child {
    border-right: none;
}

Pour un exemple permettant de voir le sélecteur fonctionner correctement : http://jsfiddle.net/kDhS8/

Answer 3

Cela fonctionne ! ( http://jsfiddle.net/NJcVE/1/ )

.footer_list:last-child { border-right : none ; }

et pour IE7/8 vous pouvez ajouter une classe au dernier ul que vous voulez. Exemple : CSS :

.lt-ie9 .last-child {border-right: none;}

Jquery :

/* LAST CHILD HACK FOR IE7/8 */
$(function(){
    if( $.browser.msie ){
     if( $.browser.version == 7.0 || $.browser.version == 8.0 ){
        $('.footer_list').each(function(){
            if( $(this).is(':last-child') ){
                $(this).addClass('last-child');
            }       
        });
     } 
});

Answer 4

Lorsque vous utilisez last-child cela signifie que dans votre ul tous les li sont des enfants, donc vous devez unifier vos ul et le dernier li est votre last-child quelque chose comme ça :

CSS :

.footer_list li{
    border: 1px solid #000;
}
.footer_list li:last-child {
    border: none;
}

HTML :

<ul class="footer_list">
    <li>Menu 1</li>
    <li>Menu 2</li>
    <li>Menu 3</li>
</ul>

Answer 5

Vous pouvez utiliser cette

#menu-bottom ul:last-child  {
    //css for Last ul tag
}