CSS Obter o último filho que não tem uma classe
Aqui está um desafio complicado para vocês, seletor de CSS para obter o:last-child
que não tem aula.
O que eu tentei até agora:
.nav-item:not(.nav-item--mobile):last-child {...}
.nav-item:last-child:not(.nav-item--mobile) {...}
Eu tenho seletores de consulta semelhantes que fazem algumas coisas divertidas, então prefiro tentar fazer isso via CSS. Os itens móveis podem ser variáveis em quantidade.
// Get the first child in the list when there are n or more, and
// they are not mobile. Yes, this actually works.
.nav-item:first-child:nth-last-child(n+7):not(.nav-item--mobile)
O seguinte me dará o último filho em todos os casos, mas eu quero o último filho que não é filho único móvel.
.navigation-item--top:last-child
Alvogeneric generic generic generic generic mobile mobile
^
target this one
HTML<ul class="nav-items-list">
<li class="nav-item"></li>
<li class="nav-item"></li>
<li class="nav-item"></li>
<li class="nav-item"></li>
<li class="nav-item nav-item--mobile"></li>
<li class="nav-item nav-item--mobile"></li>
</ul>
Sim, eu poderia descobrir qual é o correto na navegação gerada ou poderia encontrá-lo com JS.