How to Select the Last N Items with Nth-Child

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

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>

How do I choose the last 2 items in a list with css nth-child?

~~Unfortunately it's impossible.~~. Disregard this answer and look at spliters answer below.

If it were to be possible, it would look something like...

ul li:last-child+li {...}

But this doesn't work, because + will select the immediate sibling after last-child (which is nothing, of course). There is no immediate previous selector.

There are different ways of achieving this with jQuery, the most performant would be...

var lastItems = $("#list li");
lastItems.slice(lastItems.length - 2).addClass("whatever");

http://jsfiddle.net/qkzdJ/

how to select the last 4 elements using nth child?

Try it:

ul li {  display: inline-block;  width: 100%;;}
ul li:nth-last-child(-n+4) {  color: red;}

<ul>  <li>1</li>    <li>2</li>    <li>3</li>  <li>4</li>    <li>5</li>    <li>6</li>    <li>7</li>    <li>8</li>    <li>9</li>  </ul>

How to select last three child elements with help of :nth-child

span:nth-last-child(-n+3)

It selects the last 3 elements

Select the last 3 child elements

You can read more here about nth-last child, but this should basically do the trick of selecting the last 3 children with just CSS

#something a:nth-last-child(-n+3) {
    /*declarations*/
}

fiddle demonstration from Fabrício Matté

This will only select those rows returning a positive number for out N expression (-n+3), and since we are using nth-last-child, it's counting from last to first,
so first rows from bottom gives,

f(n) = -n+3
f(1) = -1+3 = 2 <- first row from the bottom
f(2) = -2+3 = 1 <- second row from the bottom
f(3) = -3+3 = 0 <- third row from the bottom

everything else will return a negative number

CSS nth-child select all but last element when length is unknown

Use :not(:last-child) to target all except the last.

http://jsfiddle.net/96nd71e3/1/

select the element before the last using nth child regardless of how many elements you have?

You can use :nth-last-child(2):

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

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

<ul>  <li>1</li>  <li>2</li>  <li>3</li>  <li>4</li>  <li>5</li></ul>

Can you use nth-child to select the last 3 items and choose odd or even?

You need to repeat the :nth-child portion as well:

li:nth-last-child(-n + 3):nth-child(even) {
    background: #0000ff;
}

li:nth-last-child(-n + 3):nth-child(odd) {
    background: #ffff00;
}

Also, depending on how many elements you have, :nth-child(odd) and :nth-last-child(odd) (as well as their even counterparts) may select different elements.

Selecting half the elements with :nth-child?

The only way you'd be able to get anywhere near to that in pure CSS is to do a selector on either nth-child(odd) or nth-child(even). If you want exactly the last half (and not either odd or even), then you'd have to use JavaScript/jQuery.

Using jQuery, you could get them using:

var yourList = $("ul li");

yourList = yourList.slice(0, Math.floor(yourList.length/2));