: n-posledné dieťa - Triky CSS

Anonim

:nth-last-childVolič umožňuje vybrať jeden alebo viacero prvkov na základe ich zdrojové poradí, podľa vzorca. Je definovaná v špecifikácii CSS Selectors úrovne 3 ako „štrukturálna pseudotrieda“, čo znamená, že sa používa na štýlovanie obsahu na základe jeho vzťahu s nadradenými a súrodeneckými prvkami. Funguje rovnako, :nth-childaž na to, že vyberá položky začínajúce od dolnej časti zdrojovej objednávky, nie od hornej.

Predpokladajme, že máme zoznam s neznámym počtom položiek a chceli by sme zvýrazniť predposlednú položku (v tomto presnom príklade „štvrtá položka“):



    

  • First Item
    • 

  • Second Item
    • 

  • Third Item
    • 

  • Fourth Item
    • 

  • Fifth Item
    •

Namiesto toho, aby sme robili niečo ako pridanie triedy do položky zoznamu (napr. .highlight), Môžeme použiť :nth-last-child:

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

Ako vidíte, :nth-last-childberie argument: môže to byť jedno celé číslo, kľúčové slová „párne“ alebo „nepárne“ alebo vzorec. Ak je zadané celé číslo, je vybraný iba jeden prvok - kľúčové slová alebo vzorec však budú iterovať cez všetky podradené prvky nadradeného prvku a vyberú zodpovedajúce prvky podobné navigácii po položkách v poli v JavaScripte. Kľúčové slová „párne“ a „nepárne“ sú priame (2, 4, 6 atď. Alebo 1, 3, 5). Vzorec je zostavený pomocou syntaxe an+b, kde:

  • „A“ je celočíselná hodnota
  • „N“ je doslovné písmeno „n“
  • „+“ Je operátor a môže to byť „+“ alebo „-“
  • „B“ je celé číslo a je potrebné, ak je do vzorca zahrnutý operátor

Je dôležité poznamenať, že tento vzorec je rovnica a iteruje cez každý súrodenecký prvok a určuje, ktorý bude vybraný. Časť „n“ vzorca, ak je zahrnutá, predstavuje množinu zvyšujúcich sa kladných celých čísel (rovnako ako iterácia poľom). V našom príklade vyššie sme vybrali každý druhý prvok so vzorcom 2n, ktorý fungoval, pretože pri každej kontrole prvku sa „n“ zvýšilo o jeden (2 × 0, 2 × 1, 2 × 2, 2 × 3 atď.). Ak sa poradie prvku zhoduje s výsledkom rovnice, vyberie sa (2, 4, 6 atď.). Podrobnejšie vysvetlenie matematiky sa dozviete v tomto článku.

Na ilustráciu uvádzame niekoľko príkladov platných :nth-last-of-typeselektorov:

Vyskúšajte toto pero!

Našťastie nemusíte vždy robiť matematiku sami - existuje niekoľko :nth-last-childtesterov a generátorov:

  • Tester trikov CSS
  • Tester Lea Verou

Body záujmu

  • :nth-last-childiteruje prvkami začínajúcimi od spodnej časti zdrojovej objednávky. Rozdiel je iba v tom :nth-child, že tento iteruje prvkami začínajúcimi od hornej časti zdrojovej objednávky.
  • :nth-last-childVolič je veľmi podobná :nth-last-of-type, ale s jedným kritickým rozdielom, že je menej špecifické. V našom príklade vyššie by priniesli rovnaký výsledok, pretože iterujeme iba nad liprvkami, ale ak by sme iterovali nad zložitejšou skupinou súrodencov, :nth-last-childpokúsili by sme sa spojiť so všetkými súrodencami, nielen so súrodencami rovnakého typu prvku. Toto odhaľuje silu funkcie :nth-last-child-it môže vybrať ľubovoľného súrodeneckého prvku v usporiadaní, nielen prvky určené pred dvojbodkou.

Podpora prehľadávača

Chrome Safari Firefox Opera IE Android iOS
Tvorba 3,2+ Tvorba 9,5+ 9+ Tvorba Tvorba

:nth-last-childbol predstavený v CSS Selectors Module 3, čo znamená, že staré verzie prehľadávačov ho nepodporujú. Avšak moderná podpora prehľadávačov je dokonalá a nové pseudo-selektory sa široko používajú v produkčných prostrediach. Ak požadujete podporu starších prehliadačov, buď polyfill pre IE, alebo použite tieto selektory nekritickými spôsobmi á la progresívne vylepšenie, ktoré sa odporúča.