: 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 Module 3, което означава, че старите версии на браузърите не го поддържат. Съвременната поддръжка на браузъра обаче е безупречна и новите псевдоселектори се използват широко в производствените среди. Ако се нуждаете от по-стара поддръжка на браузъра, или polyfill за IE, или използвайте тези селектори по некритични начини - прогресивно подобрение, което се препоръчва.