Is it possible to select the last n items with nth-child

Question

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

User · Accepted Answer

This will select the last two iems of a list:

_x000D_

li:nth-last-child(-n+2) {color:red;}

_x000D_

<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>

_x000D_

User · Answer

nth-last-child -n 2  should do the trick

User · Answer

If you are using jQuery in your project  or are willing to include it you can call nth-last-child through its selector API  this is this simulated it will cross browser   Here is a link to an nth-last-child plugin   If you took this method of targeting the elements you were interested in      ul li nth-last-child 1    addClass  last      And then style again the last class instead of the nth-child or nth-last-child pseudo selectors  you will have a much more consistent cross browser experience

User · Answer

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

User · Answer

Because of the definition of the semantics of nth-child  I don t see how this is possible without including the length of the list of elements involved  The point of the semantics is to allow segregation of a bunch of child elements into repeating groups  edit - thanks BoltClock  or into a first part of some fixed length  followed by  the rest    You sort-of want the opposite of that  which is what nth-last-child gives you

[css] Is it possible to select the last n items with nth-child?

Examples related to css

Examples related to css-selectors