: n-й останній із типу - CSS-хитрощі

Anonim

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

Припустимо, у нас є невпорядкований список і ми хочемо виділити другий до останнього пункту (у цьому конкретному прикладі, “Четвертий пункт”):



    

  • First Item
    • 

  • Second Item
    • 

  • Third Item
    • 

  • Fourth Item
    • 

  • Fifth Item
    •

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

li ( background: slategrey; ) /* select the second-last item */ li:nth-last-of-type(2) ( background: lightslategrey; )

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

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

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

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

Перегляньте CSS-хитрощі Pen:: nth-last-of-type від Chris Coyier (@chriscoyier) на CodePen.

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

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

Цікаві місця

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

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

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

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