CSS nth-child sélectionner tous les mais dernier élément lorsque la longueur est inconnue

Mise à JOUR: Le violon lien que j'ai posté a le code de travail maintenant. :not(:last-child) et :nth-last-child(n + 2) fonctionnent parfaitement.

Je suis en train d'utiliser le nth-child ou nth-last-child sélecteur pour sélectionner tous les li dans un ul l'exception de la dernière. Le hic, c'est que la longueur de la liste peut varier de 1 à 5 éléments. Je n'ai pas été en mesure de trouver de la documentation ou des exemples de la façon d'accomplir ceci.

Voici le code HTML pour la ul:

<ul class="breadcrumbs">
    <li>
        <a href="/">Home</a>
    </li>
    <li>
        <a href="/categories/1">Articles</a>
    </li>
    <li>
        <a href="/categories/6">Specials</a>
    </li>
    <li class="current">
        <a href="/categories/6/articles/21">Song Lyrics</a>
    </li>
</ul>

Voici mon code actuel:

ul > li:nth-last-child(-1n+4) > a:hover {
  color: red;
}

Ce code sélectionne le dernier élément dans la liste. J'ai aussi essayé le code ci-dessous, mais cela ne veut pas choisir n'importe quoi. J'ai essayé un certain nombre d'autres combinaisons, mais ils ne travaillent pas du tout ou le dernier élément.

ul > li:nth-child(1):nth-last-child(2) > a:hover {
  color: red;
}

Voici un violon.

pourquoi ne pas définir une base de style pour la li et ensuite utiliser li:last-child pour cible la finale d'un seul? Ne devriez pas avoir besoin de "nth-child' importe quoi pour accomplir ce que vous avez besoin.
Je suis à l'aide de la Fondation les styles sont principalement définies dans un fichier sass, mais cet aspect n'est pas une option standard pour le personnaliser, j'ai donc inclus un personnalisé du sélecteur en remplace un fichier sass.

OriginalL'auteur Daniel Bonnell | 2015-01-16

  1. 32

    Utilisation :not(:last-child) pour cible tous sauf la dernière.

    http://jsfiddle.net/96nd71e3/1/

    OriginalL'auteur nickford

  2. 0

    Vous pouvez utiliser cette

    <ul class="breadcrumbs">
    <li>
        <a href="/">Home</a>
    </li>
    <li>
        <a href="/categories/1">Articles</a>
    </li>
    <li>
        <a href="/categories/6">Specials</a>
    </li>
    <li class="current">
        <a href="/categories/6/articles/21">Song Lyrics</a>
    </li>
</ul>

    CSS

    ul > li{
background:red;
}
ul > li:last-child{
background:black;
}

    Mais si vous avez absolument besoin de changer leur style à l'extérieur de l'élément li utilisez cette

    ul > li{
background:black;
}
ul > li:not:last-child{
background:red;
}

    OriginalL'auteur eliteware