Selecting half the elements with :nth-child?

css, css-selectors, html

Solution

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

Problem

Take the following code for instance: ``` <ul> <li>Hello World</li> <li>Hello World</li> <li>Hello World</li> <li>Hello World</li> </ul> ``` Is it possible, using `:nth-child()` or otherwise, to select exactly half of the total elements? The code should select the first/last two `li`s in the above instance, then if I were to increase the number of `li`s to six, it would select the first/last three. I feel I'm going to have to use JavaScript...

Original source