Псевдокласи :nth-child() та :nth-of-type() вибирають задані елементи із групи братських елементів, починаючи з першого. На противагу їм, псевдокласи :nth-last-child() та :nth-last-of-type() вибирають елементи, рахуючи від останнього.
Наведемо кілька прикладів.
: nth-last-child(1)
Вибирає останній елемент, аналогічний :last-child.
:nth-last-child(2)
Вибирає передостанній елемент.
:nth-last-child(-n+2)
Останні два елементи.
:nth-last-child(n+2)
Всі елементи, крім останніх двох.
:nth-last-child (2n) або :nth-last-child(even)
Усі парні елементи, починаючи з кінця. :nth-last-child(even) ідентичний :nth-child(even) тільки при непарному загальному числі елементів (п'ять, наприклад); якщо загальна кількість елементів парна (шість, наприклад), то :nth-last-child(even) ідентичний :nth-child(odd) .
:nth-last-child(2n+1) або :nth-last-child(odd)
Всі непарні елементи, починаючи з кінця.
Псевдоклас h2:last-child(1) вибирає останній елемент із групи, потім перевіряє, який це елемент. Якщо це <h2>, він буде обраний, інакше елемент вибраний не буде. Як приклад розглянемо таку структуру елементів.
<code data-language="html"><section> <h2>Перший заголовок</h2> <p>Перший абзац</p> <h2>Другий заголовок</h2> <p>Другий абзац</p> </section>
Тут псевдоклас без вказівки селектора :last-child(1) вибере останній елемент — <p>Другий абзац</p>. p:last-child(1) вибере цей абзац, тому що він одночасно останній і це елемент <p>. h2:last-child(1) не вибере нічого, оскільки не збігаються дві умови одночасно: останній елемент та елемент <h2>. При цьому h2:last-child(2) вибере <h2>Другий заголовок</h2>, тут уже умови збігаються : елемент <h2> та передостанній елемент.
Псевдоклас :nth-of-type() працює подібним чином, але вибирає елементи лише зазначеного типу. Так, запис h2:nth-last-type(1) означає вибрати останній елемент <h2>. Наявність елементів іншого типу (<p>) ігнорується. Для HTML, наведеного вище, h2:nth-last-type(1) вибере рядок <h2>Другий заголовок</h2>, оскільки це останній елемент <h2> всередині <section>.
У прикладі 1 за допомогою :nth-last-of-type ховається останній абзац через властивість display зі значенням none. При отриманні кнопкою <button> фокусу (для цього достатньо клацнути по кнопці), всі абзаци нижче кнопки стають видно. При втраті кнопкою фокусу (клацання за будь-яким місцем за межами кнопки) абзаци знову ховаються.
Приклад 1. Використання :nth-last-of-type
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>:nth-last-of-type()</title> <style> button { background: #f05347; /* Червоний колір тла */
color: #fff; /* Білий текст */
display: inline-block; /* По ширині вмісту */
padding: 0.5rem 1rem; /* Поля навколо тексту */
border: none; }
button:focus~p { display: block; /* Показуємо абзаци */
}
p:nth-last-of-type(1) { display: none; /* Ховаємо останній абзац */
}
</style>
</head>
<body> <section> <h2>Життєві поради</h2> <p>Якщо вас третій день поспіль хилить у сон — значить сьогодні середа.</p> <button>Ще порада</button> <p>Немає такої поради, яку не можна було б дати.</p>
</section>
</body>
</html>Результат цього прикладу показаний на рис. 1.
Мал. 1. Прихований останній абзац
Замість p:nth-last-of-type(1) можна використовувати p:last-of-type для вибору останнього абзацу або p:nth-of-type(n+1) для вибору всіх абзаців, крім першого.