Псевдокласс :nth-last-child()

Браузер берёт всех детей родителя, нумерует их с конца начиная с 1 и сравнивает номер с аргументом псевдокласса. Аргументы те же, что у :nth-child(): конкретное число, ключевые слова odd и even, формула An+B, где n принимает значения 0, 1, 2 и далее, а отрицательные и нулевые результаты формулы отбрасываются. Считаются все соседи одного уровня независимо от тега; если нужен счёт с конца только среди одноимённых тегов, есть парный псевдокласс :nth-last-of-type(), устроенный по аналогии с :nth-of-type().

• :nth-last-child(1) – последний элемент, полный аналог :last-child.
• :nth-last-child(2) – предпоследний элемент.
• :nth-last-child(-n+3) – последние три элемента.
• :nth-last-child(n+2) – все элементы, кроме последнего.
• :nth-last-child(odd) – нечётные с конца: последний, третий с конца и так далее.

/* последние три строки таблицы */
tr:nth-last-child(-n + 3) { background-color: pink; }

/* все строки, кроме последней */
tr:nth-last-child(n + 2) { color: blue; }

/* предпоследняя строка */
tr:nth-last-child(2) { font-weight: 600; }

Отфильтровать подсчёт по произвольному селектору позволяет синтаксис of S: правило li:nth-last-child(-n+3 of li.important) выберет последние три элемента с классом important, пропуская остальные li при нумерации. Поддержка of S уже, чем у самого псевдокласса, поэтому для критичных интерфейсов стоит предусматривать запасной вариант.

:nth-last-child() и :nth-child() – в чём разница

Последняя особенность – одновременно и подводный камень. В динамических списках вроде ленты комментариев или каталога с подгрузкой добавление элемента в конец сдвигает нумерацию всех остальных с точки зрения :nth-last-child(): браузер пересчитает стили автоматически, но «последними тремя» визуально станут другие элементы. Это стоит учитывать при анимациях и подсветке.