Ho qualcosa che si comporta allo stesso modo dello snippet fornito. Ho una lista di articoli, che quando uno è selezionato, voglio che sia visualizzato in cima alla lista, cosa che posso facilmente fare con l'ordine flex. Solo uno può essere selezionato alla volta. Ma poiché ciascuno degli elementi dell'elenco ha dei bordi, l'ultimo elemento non dovrebbe avere un bordo. Semplicemente usando il li:last-of-type funziona bene per la maggior parte dei casi, tranne quando è l'ultimo elemento della lista che è selezionato.CSS: last-of-type non funziona in combinazione con: non
Ho provato diversi selettori che dovrebbero selezionare l'ultimo elemento dell'elenco in un elenco non ordinato che non ha una data classe, ma il selettore last-of-type non sembra comportarsi correttamente.
Nel caso in cui non sia chiaro nel codice, il selettore a cui mi riferisco è .selection li:not(.selected):last-of-type. E il problema è il doppio bordo in fondo alla lista. Dovrebbe essere un singolo confine proveniente dall'elemento della lista non ordinata.
.selection ul {
display: flex;
flex-direction: column;
border: .15rem solid #666;
}
.selection li {
order: 2;
border-bottom: .15rem dashed #666;
}
.selection li.selected {
order: 1;
}
/** This selector should work in my mind, but it doesn't **/
.selection li:not(.selected):last-of-type {
border-bottom: none;
}
/** Non-important styles to put it into context **/
ul { list-style: none; padding: 0; width: 25%; margin: 2rem auto; }
li { padding: 1rem 2rem; background-color: #ebebeb; }
li:hover { background-color: #ccc; }
a { color: inherit; text-decoration: none; }<div class="selection">
<ul>
<li><a href="">1</a></li>
<li><a href="">2</a></li>
<li class="selected">3</li>
</ul>
</div>Ho anche creato questo Codepen snippet per dimostrare il problema.
Ho la sensazione che questo sia un problema con il selettore :last-of-type, e forse lo sto usando male, ma nella mia mente, il selettore di cui sopra dovrebbe funzionare.
Qualsiasi aiuto o informazioni su come risolvere questo problema, o un altro modo per selezionare l'elemento, o informazioni sul motivo per cui questo non funziona sarebbe apprezzato.
Questo suona * * come un 'nth-of-class' domanda che, ovviamente, non esiste. –
Si dovrebbe anche essere consapevoli del fatto che 'nth-of-type' funziona con il DOM, ma il flexbox' order' è puramente ** visivo **. –
Beh, è più di un "ultimo di non-classe". – Pavlin