Question

Scenario

Say for example I have the following:

1 | 2 | 3
4 | 5 | 6
7 | 8 | 9

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

I have a default background for odd and even:

li:nth-child(even) {
    background: #ff0000;
} 

li:nth-child(odd) {
    background: #00ff00;
}

Question

But I want to apply a different background for the last 3 results, also depending upon whether they are even or odd:

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

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

Is this possible to do?

Answer 1

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.