CSS nth-child seleziona tutto tranne l'ultimo elemento quando la lunghezza è sconosciuta

Question

AGGIORNAMENTO: Il collegamento di violino che ho pubblicato ha ora il codice di lavoro. :not(:last-child) e :nth-last-child(n + 2) funzionano entrambi perfettamente.

sto cercando di utilizzare il selettore nth-child o nth-last-child per selezionare ogni li in un ul tranne l'ultimo. Il problema è che la lunghezza dell'elenco può variare da 1 a 5 elementi. Non sono stato in grado di trovare alcuna documentazione o esempi su come ottenerlo.

Ecco il codice HTML per 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> 

Ecco il mio codice corrente:

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

Questo codice seleziona ancora l'ultimo elemento della lista. Ho anche provato il codice qui sotto, ma questo non seleziona nulla. Ho provato anche diverse altre combinazioni, ma non hanno funzionato affatto o selezionato l'ultimo elemento.

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

Here is a fiddle.

Answer 1

Utilizzare :not(:last-child) per selezionare tutto tranne l'ultimo.

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

Answer 2

Usa :nth-last-of-type o :nth-last-child

http://jsfiddle.net/t0k8gp4d/

li:nth-last-of-type(n + 2) a { 
 
    color: red; 
 
}

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

Answer 3

È possibile utilizzare questo

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

Ma se avete assolutamente bisogno di cambiare il loro stile di fuori del elemento li principale utilizzare questo

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