:nth-last-childСелектор вам изаберете један или више елемената на основу њиховог извора би, према формули. Дефинисан је у спецификацији ЦСС Селецторс Левел 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узима аргумент: ово може бити један цео број, кључне речи „парно“ или „непарно“ или формула. Ако је наведен цео број, изабран је само један елемент - али кључне речи или формула ће се провлачити кроз све подређене елементе родитељског елемента и бирати одговарајуће елементе сличне навигацији ставкама у низу у ЈаваСцрипт-у. Кључне речи „парно“ и „непарно“ су директне (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-childтестера и генератора:
- ЦСС-Трицкс Тестер
- Тестер Леа Вероуа
Тачке од интереса
:nth-last-childпревлачи се кроз елементе почев од дна изворног налога. Једина разлика између њега и тога:nth-childје што се овај понавља кроз елементе почев од врха изворног поретка.:nth-last-childСелектор је веома слична:nth-last-of-type, али са једном критичном разликом: то је мање специфичан. У нашем примеру изнад дали би исти резултат, јер ми вршимо итерацију само надliелементима, али ако бисмо понављали сложенију групу браће и сестара,:nth-last-childпокушали би да подударају сву браћу и сестре, а не само браћу и сестре истог типа елемента. Ово открива снагу:nth-last-child-ит може да изабере било који елемент брата или сестре у аранжману, не само елементе који су наведени пре двотачке.
Подршка прегледача
| Хром | Сафари | Фирефок | Опера | ИЕ | Андроид | иОС |
|---|---|---|---|---|---|---|
| Извођење радова | 3.2+ | Извођење радова | 9.5+ | 9+ | Извођење радова | Извођење радова |
:nth-last-childје представљен у ЦСС Селецторс Модуле 3, што значи да га старе верзије прегледача не подржавају. Међутим, савремена подршка за прегледаче је беспрекорна, а нови псеудо-селектори се широко користе у производним окружењима. Ако вам је потребна старија подршка за прегледач, или полифил за ИЕ, или користите ове бираче на некритичне начине, уз прогресивно побољшање, што се препоручује.