:nth-childСелектор дозволяє вибрати один або кілька елементів , грунтуючись на їх початковому порядку, в відповідно до формули.
/* Select the first list item */ li:nth-child(1) ( ) /* Select the 5th list item */ li:nth-child(5) ( ) /* Select every other list item starting with first */ li:nth-child(odd) ( ) /* Select every 3rd list item starting with first */ li:nth-child(3n - 2) ( ) /* Select every 3rd list item starting with 2nd */ li:nth-child(3n - 1) ( ) /* Select every 3rd child item, as long as it has class "el" */ .el:nth-child(3n) ( )Він визначений у специфікації CSS Selectors Level 3 як “структурний псевдо-клас”, тобто він використовується для стилювання вмісту на основі його взаємозв’язку з батьківськими та рідними елементами.
Припустимо, ми будуємо сітку CSS і хочемо видалити поле для кожного четвертого модуля сітки. Ось цей HTML:
One Two Three Four Five Замість того, щоб додавати клас до кожного четвертого елемента (наприклад .last), ми можемо використовувати :nth-child:
.module:nth-child(4n) ( margin-right: 0; ):nth-childСелектор приймає аргумент: це може бути одним цілим, ключові слова even, oddабо формула. Якщо вказано ціле число, вибрано лише один елемент, але ключові слова або формула будуть перебирати всі дочірні елементи батьківського елемента та вибирати відповідні елементи - подібно до навігації по елементах у масиві JavaScript. Ключові слова "парні" та "непарні" є простими (2, 4, 6 тощо або 1, 3, 5 відповідно). Формула побудована з використанням синтаксису an+b, де:
- "A" - ціле число
- "N" - буквальна буква "n"
- "+" Є оператором і може бути або "+", або "-"
- "B" є цілим числом і є обов'язковим, якщо оператор включений у формулу
Важливо зауважити, що ця формула є рівнянням і перебирає кожен елемент брата або сестри, визначаючи, який буде обраний. Частина формули "n", якщо вона включена, представляє набір зростаючих додатних цілих чисел (так само, як ітерація через масив). У нашому наведеному вище прикладі ми вибрали кожен четвертий елемент з формулою 4n, яка працювала, оскільки кожного разу, коли елемент перевірявся, «n» збільшувалось на одиницю (4 × 0, 4 × 1, 4 × 2, 4 × 3 тощо). Якщо порядок елемента відповідає результату рівняння, він вибирається (4, 8, 12 тощо). Щоб отримати більш поглиблене пояснення математики, прочитайте цю статтю.
Для подальшої ілюстрації, ось кілька прикладів дійсних :nth-childселекторів:
На щастя, вам не завжди потрібно робити математику самостійно - там є кілька :nth-childтестерів та генераторів:
- CSS-Tricks Tester
- Тестер Леа Веру
: n-та дитина (+ b)
Існує маловідомий фільтр, до якого можна додати :nth-childвідповідно до специфікації CSS Selectors: Можливість вибору :nth-childпідмножини елементів, використовуючи of формат. Припустимо, у вас є список змішаного вмісту: у когось є клас .video, у когось клас .picture, і ви хочете вибрати перші 3 картинки. Ви можете зробити це за допомогою фільтра “з” так:
:nth-child(-n+3 of .picture) ( /* Selects the first 3 elements applied not to ALL children but only to those matching .picture */ )Зверніть увагу, що це відмінне від додавання селектора безпосередньо до :nth-childселектора:
.picture:nth-child(-n+3) ( /* Not the same! This applies to elements matching .picture which _also_ match :nth-child(-n+3) */ )Це може трохи заплутати, тому приклад може допомогти проілюструвати різницю:
Браузерна підтримка фільтру “of” дуже обмежена: станом на цей момент, лише Safari підтримував синтаксис. Щоб перевірити статус улюбленого браузера, ось відкриті питання, пов’язані з :nth-child(an+b of s):
- Firefox: Підтримка n-ї дитини (+ B від sel)
- Chrome: Реалізація: nth-child (an + b of S)
Цікаві місця
:nth-childперебирає елементи, починаючи з верхньої частини вихідного замовлення. Єдина різниця між ним і:nth-last-childполягає в тому, що останній перебирає елементи, починаючи з нижньої частини вихідного замовлення.- Синтаксис вибору першої
nкількості елементів трохи протилежний. Ви починаєте з-nплюс додатну кількість елементів, які потрібно вибрати. Наприклад,li:nth-child(-n+3)буде виділено перші 3liелементи. :nth-childСелектор дуже схожий на ,:nth-of-typeале з однією критичною різницею: він менш специфічний. У нашому прикладі вище вони отримали б однаковий результат, оскільки ми перебираємо лише.moduleелементи, але якби ми перебирали більш складну групу братів і сестер,:nth-childспробували б зрівняти всіх братів і сестер, а не лише братів і сестер того ж типу. Це виявляє силу:nth-child-it може обрати будь-який братський елемент в домовленості, а не тільки елементи, які вказані перед двокрапкою.
Підтримка браузера
| Chrome | Сафарі | Firefox | Опера | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Будь-який | 3,2+ | Будь-який | 9,5+ | 9+ | Будь-який | Будь-який |
:nth-childбув введений в модулі CSS Selectors 3, що означає, що старі версії браузерів його не підтримують. Однак сучасна підтримка браузера бездоганна, і нові псевдоселектори широко використовуються у виробничих середовищах. Якщо вам потрібна старіша підтримка браузера, або polyfill для IE, або використовуйте ці селектори некритичними способами - прогресивне вдосконалення, яке рекомендується.