: нтх-ласт-оф-типе - ЦСС-трикови

:nth-last-of-typeСелектор вам изаберете један или више елемената на основу њиховог извора би, према формули. Дефинисан је у спецификацији ЦСС Селецторс Левел 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узима аргумент: ово може бити један цео број, кључне речи „парно“ или „непарно“ или формула. Ако је наведен цео број, изабран је само један елемент - али кључне речи или формула ће прелазити кроз све подређене елементе надређеног елемента и одабрати одговарајуће елементе - слично навигацији ставкама у низу у ЈаваСцрипт-у. Кључне речи „парно“ и „непарно“ су директне (2, 4, 6 итд. Или 1, 3, 5 итд.). Формула је конструисана користећи синтаксу an+b, где:

• „А“ је целобројна вредност
• „Н“ је дословно слово „н“
• „+“ Је оператор и може бити „+“ или „-“
• „Б“ је цео број и потребан је ако је оператор укључен у формулу

Важно је напоменути да је ова формула једначина и понавља се кроз сваки братски елемент, одређујући који ће бити одабран. „Н“ део формуле, ако је укључен, представља скуп растућих позитивних целих бројева (баш као и понављање кроз низ). У нашем претходном примеру изабрали смо сваки други елемент са формулом 2n, који је функционисао, јер се сваки пут када је елемент проверен, „н“ повећао за један (2 × 0, 2 × 1, 2 × 2, 2 × 3 итд.). Ако се редослед елемента подудара са резултатом једначине, он се бира (2, 4, 6 итд.). За детаљнија објашњења математике прочитајте овај чланак.

Да бисмо илустровали даље, ево неколико примера ваљаних :nth-last-of-typeселектора:

Погледајте ЦСС-трикове оловке:: нтх-ласт-оф-типе Цхрис Цоииер (@цхрисцоииер) на ЦодеПен-у.

Срећом, не морате увек сами да рачунате - постоји неколико :nth-last-of-typeтестера и генератора:

• ЦСС-Трицкс Тестер
• Тестер Леа Вероуа

Тачке од интереса

• :nth-last-of-typeпревлачи се кроз елементе почев од дна изворног налога. Једина разлика између њега и тога :nth-of-typeје што се овај понавља кроз елементе почев од дна изворног поретка.
• :nth-last-of-typeСелектор је веома слична :nth-last-child, али са једном критичном разликом: то је прецизнији. У нашем примеру изнад дали би исти резултат, јер ми вршимо итерацију само над liелементима, али ако бисмо понављали сложенију групу браће и сестара, :nth-last-childпокушали би да подударају сву браћу и сестре, а не само браћу и сестре истог типа елемента. Ово открива снагу :nth-last-of-type-ит циља одређену врсту елемента у аранжману у односу на сличну браћу и сестре, а не на сву браћу и сестре.

Подршка прегледача

Хром	Сафари	Фирефок	Опера	ИЕ	Андроид	иОС
Извођење радова	3.2+	Извођење радова	9.5+	9+	Извођење радова	Извођење радова

:nth-last-of-typeје представљен у ЦСС Селецторс Модуле 3, што значи да га старе верзије прегледача не подржавају. Међутим, савремена подршка за прегледаче је беспрекорна, а нови псеудо-селектори се широко користе у производним окружењима. Ако вам је потребна старија подршка за прегледач, или полифил за ИЕ, или користите ове бираче на некритичне начине, уз прогресивно побољшање, што се препоручује.