Is it possible to select the last n items with nth-child?
Using a standard list, I'm trying to select the last 2 list items. I've various permutations of An+B
but nothing seems to select the last 2:
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 */
I'm aware of a new CSS3 selectors like :nth-last-child()
but I'd prefer something that works in a few more browsers if possible (don't care about IE particularly).
This will select the last two iems of a list:
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>
</ul>
nth-last-child
sounds like it was specifically designed to solve this problem, so I doubt whether there is a more compatible alternative. Support looks pretty decent, though.
:nth-last-child(-n+2)
should do the trick