: n-та-остання-дитина - CSS-хитрощі

Anonim

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

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



    

  • First Item
    • 

  • Second Item
    • 

  • Third Item
    • 

  • Fourth Item
    • 

  • Fifth Item
    •

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

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

Як бачите, :nth-last-childприймає аргумент: це може бути одне ціле число, ключові слова "парне" або "непарне", або формула. Якщо вказано ціле число, вибрано лише один елемент, але ключові слова або формула будуть перебирати всі дочірні елементи батьківського елемента та вибирати відповідні елементи, подібні до елементів навігації в масиві в 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селекторів:

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

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

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

Цікаві місця

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

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

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

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