How to Choose The Last 2 Items in a List with CSS Nth-Child

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/

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

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

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

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>

Lists and nth-child

Your fiddle is working like you want. This question:

When a selector targets multiple lists, are they not combined into one list?

The answer is NO. Two lists are independent and if you target ul li you are selecting all li of all ul but not combined.

In order to combine more than one ul you need to remove dinamically the end of every ul except the last, and the start of every ul except the first.

EDIT

I made a fiddle with a piece of javascript that helps you to combine all ul

https://jsfiddle.net/1q66hwgg/2/

The code:

var arrLi = [];
$('ul').each(function() {
    $(this).find('li').each(function() {
        arrLi.push($(this).html());
    });
    $(this).remove();
});
var ul = $('<ul></ul>').attr({id:"ulid"}).appendTo("#wrap");
for(var i in arrLi) {
    var li =$('<li>'+arrLi[i]+'</li>');
    li.appendTo(ul);
}

:nth-last-child to select second half of list of arbitrary length

While there is no way to cover all cases in CSS, you can cover as many as you're willing to code for.

li:last-child,
li:nth-last-child(2):not(:first-child),
li:nth-last-child(3):not(:nth-child(-n+2)),
li:nth-last-child(4):not(:nth-child(-n+3)),
li:nth-last-child(5):not(:nth-child(-n+4))
/* ...... */
{
  color:red;
}

li:last-child,li:nth-last-child(2):not(:first-child),li:nth-last-child(3):not(:nth-child(-n+2)),li:nth-last-child(4):not(:nth-child(-n+3)),li:nth-last-child(5):not(:nth-child(-n+4))/* ...... */{  color:red;}
ul{float:left}

<ul>    <li>some text</li>    <li>some text</li></ul><ul>    <li>some text</li>    <li>some text</li>    <li>some text</li>    <li>some text</li></ul><ul>    <li>some text</li>    <li>some text</li>    <li>some text</li>    <li>some text</li>    <li>some text</li>    <li>some text</li></ul><ul>    <li>some text</li>    <li>some text</li>    <li>some text</li>    <li>some text</li>    <li>some text</li>    <li>some text</li>    <li>some text</li>    <li>some text</li></ul><ul>    <li>some text</li>    <li>some text</li>    <li>some text</li>    <li>some text</li>    <li>some text</li>    <li>some text</li>    <li>some text</li>    <li>some text</li>    <li>some text</li>    <li>some text</li></ul><ul>    <li>some text</li>    <li>some text</li>    <li>some text</li>    <li>some text</li>    <li>some text</li>    <li>(not coded for)</li>    <li>(this should be red)</li>    <li>some text</li>    <li>some text</li>    <li>some text</li>    <li>some text</li>    <li>some text</li></ul>

Select last child when odd, 2 last childs when even

Here is one way...

.wrap div:last-child,.wrap div:nth-last-of-type(-n+2):not(:nth-child(even)) {    color: red;}

<div class="wrap">    <div>Odd</div>    <div>Even</div>    <div>Odd</div>    <div>Even</div>    <div>Odd</div>    <div>Even</div></div>
<hr>
<div class="wrap">    <div>Odd</div>    <div>Even</div>    <div>Odd</div>    <div>Even</div>    <div>Odd</div></div>

Select nth-child from last/bottom

You will want to use the :nth-last-child(2n+0). This is working from the last child instead of the first/newest child. Hope this helps.

---

Related Topics