Question

I have a collection of <li> elements which are aligned so that they form two columns. Using a combination of nth-last-child and nth-child(even) – or any other selector – is it possible to apply a style to EITHER: a) the last two (assuming there is an equal number of <li>‘s) OR b) the last one only (assuming there is an odd number of <li>‘s)

See my fiddle for an example or use the code below. I have highlighted in yellow the ones which should have the style applied.

I’m looking for no server side solution, html modifications nor Javascript, I am curious to know if it can be done solely with CSS. Browser compatibility is not an issue so CSS3 all the way.

Code

HTML

<ul>
<li>Hello World</li><!--
--><li>Hello World</li><!--
--><li>Hello World</li><!--
--><li>Hello World</li><!--
--><li>Hello World</li><!--
--><li>Hello World</li><!--
--><li style="background: yellow">Hello World</li><!--
--><li style="background: yellow">Hello World</li>
</ul>

<br />

<ul>
<li>Hello World</li><!--
--><li>Hello World</li><!--
--><li>Hello World</li><!--
--><li>Hello World</li><!--
--><li>Hello World</li><!--
--><li>Hello World</li><!--
--><li style="background: yellow">Hello World</li>
</ul>​

CSS

ul {
    padding: 10px;
    width: 400px;
    background: red;
}

li {
    width: 200px;
    display: inline-block;
    background: blue;
}   ​

Answer 1

Try this – http://jsfiddle.net/HFn9Q/4/

/* set the last 2 items bg to yellow */
li:nth-last-child(2) {
    background: yellow;
}

/* clean the pre-last item bg in case of odd <li> number */
li:nth-child(even) {
    background: blue;
}

/* explicitly set the very last item bg to yellow for even <li> number, otherwise the previous rule will give it a blue bg */    
li:last-child {
    background: yellow;
}