CSS від А до Я: як використовувати CSS селектор nth-child

31

Від автора: вітаю вас в нашій серії уроків CSS від А до Я! В цій серії я розповім вам про CSS значення і властивості, які починаються з різних букв алфавіту. Іноді навчального ролика буває недостатньо, і в цій статті я дам вам кілька швидких рад по роботі з псевдоклассом nth-child.

N значить nth-child

В CSS є безліч потужних селекторів, з допомогою яких можна знаходити елементи на сторінці і застосовувати до них стилі.
Гнучкості вирази для знаходження елементів за шаблоном (an+b) псевдоклас: nth-child, можливо, є самим потужним. Більш детально даний псевдоклас був розібраний у відеоуроці. У цьому уроці ми дізнаємося, коли краще використовувати nth-child, а коли краще обійтися звичайним класом.

Коли потрібно використовувати nth-child?

Це питання мені дуже часто задають студенти. На жаль, це залежить від ситуації. Це перше, що необхідно врахувати. Але я постараюся дати вам пару базових критеріїв.

По-перше, всі селектори типу nth-child підтримуються тільки в IE9 і вище (виняток :first-child). Тобто насамперед необхідно визначитися з діапазоном браузерів, з якими ви будете працювати. Якщо вам доведеться працювати з IE8, ви можете використовувати звичайні класи або :first-child.

Порада 1: якщо ви підтримуєте IE8, використовуйте :first-child

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

Не потрібно додавати рамку праворуч і потім видаляти його на останньому елементі. Краще додайте рамку зліва і видаліть її у першого елемента.

.site-nav li {
border-left: 2px solid grey;
}
.site-nav li:first-child {
border: 0;
}

Так само можна вчинити і для верхніх і нижніх меж. Якщо ж вам пощастило не підтримувати IE8, читайте далі…

Порада 2: використовуйте замість класів :first-child :last-child

Якщо ви створюєте чи використовуєте готову сітку, і вам потрібно зробити що-то з першої і останньої клітинки в рядку, скористайтесь псевдоклассами :first-child :last-child замість класів типу .first і .last в HTML.

Так ваш HTML-код буде виглядати чистіше, і вам не доведеться занадто багато думати під час розробки макету. Іноді макети бувають дуже складними. Чим менше вам потрібно думати над ним, тим краще.

Порада 3: використовуйте nth-child для альтернативних стилів

Класичний приклад альтернативних стилів – різний фон для парних і непарних рядків таблиці. Ще один приклад – обтікання парних і непарних блоків контенту по лівому і правому краю на сторінці або в контейнері (нитка коментарів або діалог).

В таких випадках я використовую :nth-child(odd): nth-child(even). Щоб не засмічувати код, пропишіть перше стан без nth-child, після чого вже використовуйте nth-child з більшою специфічністю для альтернативних стилів.

/* ось так */
.data table tr {
background: white;
}
.data table tr:nth-child(even) {
background: lightgrey;
}
/* а */
.data table tr:nth-child(odd) {
background: white;
}
.data table tr:nth-child(even) {
background: lightgrey;
}

Порада 4: уникайте дивних і складних виразів з nth-child

Для більш складних вибірок на сторінці я віддаю перевагу прописувати класи безпосередньо в HTML, а не працювати з заплутаними виразами nth-child.

Вирази типу li:nth-child(-n+3) або li:nth-child(5n+1):not(nth-child(3n-1)) занадто складні для розуміння. Поняття не маю, що вони означають, але вони працюють!

На жаль, в деяких складних дизайнах без таких виразів не обійтися. Але уявіть, що ви повернетеся до коду через пару місяців і спробуєте зрозуміти, що ви хотіли зробити. Навіть у досвідчених експертів з CSS на це піде досить багато часу!

Порада 5: використовуйте nth-child, коли не можете контролювати HTML

Може прозвучати дивно. І дійсно, ми, як розробники та дизайнери, повинні контролювати HTML. Це наше головне завдання. Але тут я кажу про системи управління контентом.

При створенні шаблону для сайту на CMS у вас буде можливість контролювати структуру HTML і створювати класи та атрибути. Проте іноді у ваших шаблонів такі місця, куди буде вставлятися вміст текстових полів або областей з самої CMS. Класичний приклад – WP the_content – один великий шматок HTML, який ви або погано контролюєте, або не контролюєте взагалі.

У цій ситуації вам допоможуть :first-child :last-child :nth-child. От і всі, 5 порад щодо того, як використовувати або не використовувати самі потужні й гнучкі селектори CSS.