CSS ul li: éviter les doubles frontières

J'ai un UL avec

border: 1px solid grey;

il contient plusieurs LIs avec

border-bottom: 1px dotted grey;

de conserver les articles à part visuellement. Mais maintenant, le dernier LI a la bordure en pointillé et l'UL solide frontière! Cela semble ennuyeux. Comment puis-je l'éviter? Est-il un moyen de mettre des frontières entre LIs au lieu d'après eux?

source d'informationauteur MrBubbles

  1. 19

    Des sélecteurs CSS3 pouvez cibler :first-child ou :last-childcomme ceci:

    ul {
    border: 1px solid grey;
}
li {
    border-bottom: 1px dotted grey;
}
li:last-child {
    border:none;
}

    Un exemple de travail: http://api.fatherstorm.com/test/4165384.php

  2. 11

    Lisse solution est d'utiliser le plus (+) sélecteur de style de la liste:

    <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

    Vous venez d'ajouter le code css suivant:

    li + li {
     border-top: 1px dotted grey;
}

    Vous éviter d'ajouter un supplément de sélecteur et sont en mesure de garder le code plus propre. Selon vos besoins, vous pourriez vouloir vérifier compatibilité navigateur premier.

  3. 2

    Utiliser une classe ou le sélecteur de CSS3 :last-child pour supprimer le dernier <li> border-bottom

    ul li:last-child { border-bottom:0; }

    ou

    <ul>
    <li>1</li>
    <li>2</li>
    <li class="last">3</li>
</ul>

ul li.last { border-bottom:0; }
  4. 1

    Il suffit d'ajouter une classe différente de la dernière li qui spécifie de ne pas montrer une frontière.