: n-го типу - CSS-хитрощі

Зміст

:nth-of-typeСелектор дозволяє вибрати один або кілька елементів , грунтуючись на їх початковому порядку, в відповідно до формули. Це визначено в специфікації CSS Selectors Level 3 як "структурний псевдо-клас", тобто воно використовується для стилювання вмісту на основі його взаємозв'язку з батьківськими та рідними елементами.

Припустимо, у нас є невпорядкований список і ми хочемо змінити елементи списку «зебра-смужка»:



    

  • First Item
    • 

  • Second Item
    • 

  • Third Item
    • 

  • Fourth Item
    • 

  • Fifth Item
    •

Замість того, щоб додавати класи до кожного елемента списку (наприклад, .even& .odd), ми можемо використовувати :nth-of-type:

li ( background: slategrey; ) /* select alternating items starting with the second item */ li:nth-of-type(2n) ( background: lightslategrey; )

Як бачите, :nth-of-typeприймає аргумент: це може бути одне ціле число, ключові слова "парне" або "непарне", або формула, як показано вище. Якщо вказано ціле число, вибрано лише один елемент, але ключові слова або формула будуть перебирати всі дочірні елементи батьківського елемента та вибирати відповідні елементи, подібні до елементів навігації в масиві в JavaScript. Ключові слова „парні” та „непарні” є простими, але формула побудована з використанням синтаксису an+b, де:

  • "A" - ціле число
  • "N" - буквальна буква "n"
  • "+" Є оператором і може бути або "+", або "-"
  • "B" є цілим числом і є обов'язковим, якщо оператор включений у формулу

Важливо зауважити, що ця формула є рівнянням і перебирає кожен елемент брата або сестри, визначаючи, який буде обраний. Частина формули "n", якщо вона включена, представляє набір зростаючих додатних цілих чисел (так само, як ітерація через масив). У нашому наведеному вище прикладі ми вибрали кожен другий елемент з формулою 2n, яка спрацювала, оскільки кожного разу, коли елемент перевірявся, “n” збільшувався на одиницю (2 × 0, 2 × 1, 2 × 2, 2 × 3 тощо). Якщо порядок елемента відповідає результату рівняння, він вибирається (2, 4, 6 тощо). Щоб отримати більш поглиблене пояснення математики, прочитайте цю статтю.

Для подальшої ілюстрації, ось кілька прикладів дійсних :nth-of-typeселекторів:

Перевірте цю ручку!

На щастя, вам не завжди потрібно робити математику самостійно - там є кілька :nth-of-typeтестерів та генераторів:

  • CSS-Tricks Tester
  • Тестер Леа Веру

Цікаві місця

  • :nth-of-typeперебирає елементи, починаючи з верхньої частини вихідного замовлення. Єдина різниця між ним і :nth-last-of-typeполягає в тому, що останній перебирає елементи, починаючи з нижньої частини вихідного замовлення.
  • :nth-of-typeСелектор дуже схожий на , :nth-childале з однією критичною різницею: це більш конкретно. У нашому прикладі вище вони отримали б однаковий результат, оскільки ми перебираємо лише liелементи, але якби ми перебирали більш складну групу братів і сестер, :nth-childспробували б зрівняти всіх братів і сестер, а не лише братів і сестер того ж типу. Це виявляє силу :nth-of-type-целі, спрямованої на певний тип елемента в домовленості щодо подібних братів і сестер, а не всіх братів і сестер.

Підтримка браузера

Chrome Сафарі Firefox Опера IE Android iOS
Працює 3,2+ Працює 9,5+ 9+ Працює Працює

:nth-of-typeбув введений в модулі CSS Selectors 3, що означає, що старі версії браузерів його не підтримують. Однак сучасна підтримка браузера бездоганна, і нові псевдоселектори широко використовуються у виробничих середовищах. Якщо вам потрібна старіша підтримка браузера, або polyfill для IE, або використовуйте ці селектори некритичними способами - прогресивне вдосконалення, яке рекомендується.

Цікаві статті...