web-dev-qa-db-fra.com

Est-il possible de sélectionner les n derniers éléments avec n-enfant?

En utilisant une liste standard, j'essaie de sélectionner les 2 derniers éléments de la liste. J'ai différentes permutations de An+B Mais rien ne semble sélectionner les 2 derniers:

li:nth-child(n+2) {} /* selects from the second onwards */
li:nth-child(n-2) {} /* selects everything */
li:nth-child(-n+2) {} /* selects first two only */
li:nth-child(-n-2) {} /* selects nothing */

Je connais un nouveau sélecteur CSS3 tel que :nth-last-child(), mais je préférerais quelque chose qui fonctionne dans quelques navigateurs supplémentaires si possible (ne vous souciez pas de IE en particulier) .

csscss3css-selectors
115
DisgruntledGoat

Cela sélectionnera les deux derniers éléments d’une liste:

li:nth-last-child(-n+2) {color:red;}
<ul>
  <li>fred</li>
  <li>fred</li>
  <li>fred</li>
  <li>fred</li>
  <li>fred</li>
  <li>fred</li>
  <li>fred</li>
  <li>fred</li>
  <li>fred</li>
  <li>fred</li>
</ul>
237
John Guise

nth-last-child semble être spécialement conçu pour résoudre ce problème, alors je doute qu'il existe une alternative plus compatible. Soutien semble assez décent , cependant.

55
Pekka 웃

:nth-last-child(-n+2) devrait faire l'affaire

11
Danyl Sobolev

En raison de la définition de la sémantique de nth-child, Je ne vois pas comment cela est possible sans inclure la longueur de la liste des éléments impliqués. L’intérêt de la sémantique est de permettre la séparation d’un groupe d’éléments enfants en groupes répétitifs (edit - merci BoltClock) ou en une première partie de longueur fixe, suivie de "le reste". Vous voulez en quelque sorte le contraire de cela, et c'est ce que nth-last-child vous donne.

1
Pointy