: n-posledního typu - Triky CSS

Anonim

:nth-last-of-typeVolič umožňuje vybrat jeden nebo více prvků na základě jejich zdrojové pořadí, podle vzorce. Ve specifikaci CSS Selectors Level 3 je definována jako „strukturní pseudotřída“, což znamená, že se používá ke stylování obsahu na základě jeho vztahu k nadřazeným a sourozeneckým prvkům. Funguje stejně, :nth-of-typeaž na to, že vybírá položky začínající na spodní straně zdrojové objednávky, nikoli nahoře.

Předpokládejme, že máme neuspořádaný seznam a chceme zvýraznit předposlední položku (v tomto přesném příkladu „Čtvrtá položka“):



    

  • First Item
    • 

  • Second Item
    • 

  • Third Item
    • 

  • Fourth Item
    • 

  • Fifth Item
    •

Spíše než něco jako přidání třídy do položky seznamu (např. .highlight) Můžeme použít :nth-last-of-type:

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

Jak vidíte, :nth-last-of-typevezme argument: může to být jedno celé číslo, klíčová slova „sudá“ nebo „lichá“ nebo vzorec. Pokud je zadáno celé číslo, je vybrán pouze jeden prvek - klíčová slova nebo vzorec však budou iterovat všemi podřízenými prvky nadřazeného prvku a vyberou odpovídající prvky - podobně jako při navigaci v položkách v poli v JavaScriptu. Klíčová slova „sudý“ a „lichý“ jsou přímočará (2, 4, 6 atd. Nebo 1, 3, 5 atd.). Vzorec je sestaven pomocí syntaxe an+b, kde:

  • „A“ je celočíselná hodnota
  • „N“ je doslovné písmeno „n“
  • „+“ Je operátor a může to být „+“ nebo „-“
  • „B“ je celé číslo a je vyžadováno, pokud je do vzorce zahrnut operátor

Je důležité si uvědomit, že tento vzorec je rovnice a iteruje každým prvkem sourozence a určuje, který bude vybrán. Část vzorce „n“, pokud je zahrnuta, představuje sadu zvyšujících se kladných celých čísel (stejně jako iterace v poli). V našem výše uvedeném příkladu jsme vybrali každý druhý prvek pomocí vzorce 2n, který fungoval, protože při každé kontrole prvku se „n“ zvýšilo o jeden (2 × 0, 2 × 1, 2 × 2, 2 × 3 atd.). Pokud se pořadí prvku shoduje s výsledkem rovnice, bude vybrán (2, 4, 6 atd.). Podrobnější vysvětlení zapojené matematiky naleznete v tomto článku.

Pro další ilustraci uvádíme několik příkladů platných :nth-last-of-typeselektorů:

Podívejte se na triky Pen CSS:: nth-last-of-type od Chris Coyier (@chriscoyier) na CodePen.

Naštěstí nemusíte vždy dělat matematiku sami - existuje několik :nth-last-of-typetesterů a generátorů:

  • Tester triků CSS
  • Tester Lea Verou

Body zájmu

  • :nth-last-of-typeiteruje prvky počínaje od spodní části zdrojové objednávky. Jediný rozdíl mezi ním a tím :nth-of-typeje, že tento iteruje prvky, které začínají od spodní části zdrojové objednávky.
  • :nth-last-of-typeVolič je velmi podobná :nth-last-child, ale s jedním kritickým rozdílem, že je specifická. V našem příkladu výše by produkovali stejný výsledek, protože iterujeme pouze nad liprvky, ale pokud bychom iterovali nad složitější skupinou sourozenců, :nth-last-childpokusili bychom se shodovat se všemi sourozenci, nejen se sourozenci stejného typu prvku. To odhaluje sílu :nth-last-of-type- zaměřuje se na určitý typ prvku v uspořádání ve vztahu k podobným sourozencům, ne všem sourozencům.

Podpora prohlížeče

Chrome Safari Firefox Opera TJ Android iOS
Funguje 3,2+ Funguje 9,5+ 9+ Funguje Funguje

:nth-last-of-typebyl představen v modulu CSS Selectors Module 3, což znamená, že staré verze prohlížečů jej nepodporují. Podpora moderních prohlížečů je však dokonalá a nové pseudo-selektory jsou široce používány v produkčním prostředí. Pokud požadujete podporu starších prohlížečů, buď polyfill pro IE, nebo použijte tyto selektory nekritickými způsoby á la progresivní vylepšení, které se doporučuje.