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

Question

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 des nouveaux sélecteurs CSS3 tels 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).

Answer 1

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>
<li>fred</li>
</ul>
 

Answer 2

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. Le soutien semble assez décent , cependant.

Answer 3

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

Answer 4

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 - thanks BoltClock) ou en une première partie de longueur fixe, suivie de "le reste". Vous voulez en quelque sorte le contraire, c'est-à-dire ce que nth-last-child vous donne.

Answer 5

Si vous utilisez jQuery dans votre projet, ou sont prêts à inclure, vous pouvez appeler nth-last-child grâce à son sélecteur de l'API (c'est cette simulation, il sera de la croix-navigateur). Voici un lien pour un nth-last-child plugin. Si vous avez pris cette méthode de ciblage les éléments que vous intéresser:

$('ul li:nth-last-child(1)').addClass('last');

Et puis, nouveau style de l' last classe à la place de l' nth-child ou nth-last-child sélecteurs de pseudo, il vous sera beaucoup plus cohérente de la croix-navigateur de l'expérience.