: n-ти-последен от типа - CSS-трикове

В :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-it насочва към определен тип елемент в подреждане във връзка с подобни братя и сестри, а не всички братя и сестри.

Поддръжка на браузър

Chrome	Сафари	Firefox	Опера	IE	Android	iOS
Върши работа	3.2+	Върши работа	9,5+	9+	Върши работа	Върши работа

:nth-last-of-typeбеше въведен в CSS Selectors Module 3, което означава, че старите версии на браузърите не го поддържат. Съвременната поддръжка на браузъра обаче е безупречна и новите псевдоселектори се използват широко в производствените среди. Ако се нуждаете от по-стара поддръжка на браузъра, или polyfill за IE, или използвайте тези селектори по некритични начини - прогресивно подобрение, което се препоръчва.