Псевдоклас :last-child
Оновлено: 11.01.2023
Псевдоклас :last-child
Псевдоклас :last-child задає стиль останнього елемента в групі братніх елементів (тих, що мають одного батька).
Як приклад розглянемо такий код HTML:
<article>
<p>Автор: Гордон Фрімен, канд. фіз.-мат. наук</p>
<p>Зміст статті</p>
<address>Пошта: freemen@blackmesa.com</address>
<p>Опублікована: <time datetime="2018-11-27">27 листопада 2018</time></p>
</article>
Псевдоклас :last-child без зазначення селектора вибере всі останні елементи всередині <article> і встановить для них червоний колір тексту. Тут останніми йдуть <p> і <time> їх і буде обрано.
article :last-child { color: red; }
При додаванні селектора до :last-child спершу береться останній елемент, потім дивиться якого він типу. Якщо елемент збігається із зазначеним селектором, то він буде обраний. Таким чином, вибирається елемент, якщо він задовольняє двом умовам одночасно: це останній елемент і це елемент зазначеного типу. Тут червоним кольором буде виділено абзац, оскільки останнім іде саме <p>.
article p:last-child { color: red; }
Якщо замість p використовувати інший селектор, то нічого вибрано не буде, оскільки не виконується умова "останній елемент це <h1>".
article h1:last-child { color: red; }
Для вибору останнього елемента певного типу використовуйте псевдоклас :last-of-type.
Замість :last-child допустимо використовувати :nth-last-child(1).
Синтаксис
Селектор:last-child { ... }