Очень распространённая задача при вёрстке — как задать стиль последнему элементу с определённым классом?

<div class="list">
    <div class="red">...</div>
    <div class="red">...</div>
    <div class="red">...</div>
    <div class="green">...</div>
    <div class="green">...</div>
    <div class="green">...</div>
</div>

Чтобы задать стиль последнему элементу с классом "red", нужно использовать псевдокласс nth-last-child, который представляет собой шаблон для сопоставления элементов, начиная с конца списка:

:nth-last-child(1 of .red) {background-color: red}

Задаём стиль последним двум элементам с классом "green":

.green:nth-last-child(-n + 2) {background-color: green}