Останній з нас: використання last-child і last-of-type в CSS

31

Від автора: 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; }

І ми отримаємо:

Последний из нас: использование last-child и last-of-type в CSS

Ефект можна зробити і на nth-child:

article p:nth-child(4) {
text-indent: 2rem;
}

Зокрема ефективно у віршах, як приклад вище, де кількість рядків у строфі відомо заздалегідь.

Стилі працюють тільки, якщо параграф дійсно останній у блоці. Якщо кожен параграф закінчується горизонтальною смугою:

In Carcosa.

… тоді параграф вже не буде останньою, і правило ігнорується. В таких випадках допомагає псевдоселектор last-of-type.

Останній шанс побачити

Селектор last-of-type selector знаходить останнє входження елемента даного типу і змінює його.

article p:last-of-type { text-indent: 2rem; }

В цьому разі це правило буде мати той же ефект на контент, що і last-child. Обидва селектора можна використовувати в комбінації з іншими: наприклад, можна змінювати останнє входження класу.

Реальний спосіб застосування last-of-type – видалення візуального ефекту з останнього елемента, коли ефект застосований до всіх елементів. Наприклад, панель меню:

Home
About Us
Products

По дизайну всіх посиланнях додається рамка з правого боку, відокремлює пункти меню один від одного:

nav a { border-right: 1px solid #000; }

Проблема в тому, що у останньої посилання теж буде рамка з правого боку. Візуально така рамка означає, що за нею повинна бути ще одна посилання. У випадку з останньою посиланням такого бути не повинно. Для видалення зайвої рамки можна використовувати last-child:

nav a { border-right: 1px solid #000; }
nav a:last-child { border-right: none; }

Навіть ще краще, стилі можна переписати в один рядок, об’єднавши з допомогою nav a:not(:last-child) { border-right: 1px solid #000; }.