Від автора: CSS псевдоселекторы типу last – ще один зручний спосіб відокремити уяву від розмітки: щоб не засмічувати HTML класами, з допомогою яких намагатися встановити властивості для останнього елемента всередині блоку, і які нам доведеться пересувати і перевизначати в разі, якщо вміст змінився, ми використовуємо селектор, який буде застосований тільки до останнього елемента без змін в розмітці.
Щоб правильно використовувати last-child, потрібно зрозуміти, чим відрізняються дочірні елементи від суміжних в CSS. Скажімо, у нас є наступна розмітка:
Along the shore the cloud waves break,
The twin suns sink behind the lake,
The shadows lengthen
In Carcosa.
Strange is where the night black stars rise,
And strange moons circle through the skies,
But stranger still is
Lost Carcosa.
Додати відступ в останній параграф у тегу div можна різними способами: можна прописати повторювані инлайновые стилі (дуже необдумано, такі стилі складно обслуговувати і змінювати, займає багато часу); можна використовувати повторюваний клас (краще, але створення, зміна та застосування займає все ще занадто багато часу); з допомогою nth-child або найкращий варіант – last-child.
article p:last-child { text-indent: 2rem; }
І ми отримаємо:
Ефект можна зробити і на nth-child:
article p:nth-child(4) {
text-indent: 2rem;
}
Зокрема ефективно у віршах, як приклад вище, де кількість рядків у строфі відомо заздалегідь.
Стилі працюють тільки, якщо параграф дійсно останній у блоці. Якщо кожен параграф закінчується горизонтальною смугою:
…
In Carcosa.
