A :nth-last-of-typeválasztó lehetővé teszi egy vagy több elem kiválasztását a forrás sorrendje alapján, egy képlet szerint. A CSS Selectors 3. szintű specifikációja „strukturális ál-osztályként” definiálja, vagyis a tartalom stílusához használják a szülő és a testvér elemekkel való kapcsolata alapján. Ugyanúgy működik, mint :nth-of-typeazzal, hogy az elemeket a forrás sorrend aljától kezdődően választja ki, nem pedig a tetejét.
Tegyük fel, hogy rendezetlen listánk van, és szeretnénk kiemelni az utolsó előtti tételt (ebben a pontos példában a „negyedik tételt”):
- First Item
- Second Item
- Third Item
- Fourth Item
- Fifth Item
Ahelyett, hogy valami olyat .highlighttennénk, mint egy osztály hozzáadása a listaelemhez (pl. ), Használhatjuk :nth-last-of-type:
li ( background: slategrey; ) /* select the second-last item */ li:nth-last-of-type(2) ( background: lightslategrey; )Amint láthatja, :nth-last-of-typeargumentumot vesz fel: ez lehet egyetlen egész szám, a „páros” vagy „páratlan” kulcsszó vagy egy képlet. Ha egész szám van megadva, csak egy elemet választanak ki - de a kulcsszavak vagy a képlet végigvezetik a szülőelem összes gyermekét, és kiválasztanak egyező elemeket - hasonlóan egy tömb elemeinek navigálásához a JavaScript-ben. A „páros” és a „páratlan” kulcsszavak egyértelműek (2, 4, 6 stb. Vagy 1, 3, 5 stb.). A képlet a szintaxis felhasználásával készül an+b, ahol:
- Az „a” egész szám
- „N” a szó szerinti „n” betű
- A „+” operátor, és lehet „+” vagy „-”
- A „b” egész szám, és akkor szükséges, ha egy operátor szerepel a képletben
Fontos megjegyezni, hogy ez a képlet egy egyenlet, és az egyes testvérelemeken keresztül ismétlődik, meghatározva, hogy melyiket választják ki. A képlet „n” része, ha benne van, növekvő pozitív egészek halmazát jelenti (akárcsak egy tömbön keresztüli iteráció). A fenti példánkban minden második elemet kiválasztottunk a képlettel 2n, ami azért működött, mert minden egyes elem ellenőrzésénél az „n” eggyel nőtt (2 × 0, 2 × 1, 2 × 2, 2 × 3 stb.). Ha egy elem sorrendje megegyezik az egyenlet eredményével, akkor kiválasztásra kerül (2, 4, 6 stb.). Az érintett matematika részletesebb magyarázatához olvassa el ezt a cikket.
A további szemléltetés érdekében íme néhány példa az érvényes :nth-last-of-typeválasztókról:
Lásd a Pen CSS-trükköket: Chris Coyier (@chriscoyier) n-edik típusa a CodePen-en.
Szerencsére nem mindig kell magának :nth-last-of-typematekoznia - több tesztelő és generátor is van ott:
- CSS-trükkök tesztelője
- Lea Verou tesztelője
Látványosság
:nth-last-of-typea forrásrend aljától kezdődő elemeken keresztül iterál. Az egyetlen különbség közte és:nth-of-typeaz, hogy az utóbbi a forrásrend aljától kezdődő elemeken keresztül iterál.- A
:nth-last-of-typeválasztó nagyon hasonló,:nth-last-childde egyetlen kritikus különbséggel: specifikusabb. A fenti példánkban ugyanazt az eredményt produkálnák, mert csaklielemeket ismételünk , de ha egy összetettebb testvércsoporton keresztül ismételnénk,:nth-last-childakkor megpróbálnánk az összes testvért illeszteni, nem csak az azonos elemtípusú testvéreket. Ez feltárja annak erejét, hogy:nth-last-of-typeegy adott típusú elemet céloz meg egy elrendezésben hasonló testvérekkel, nem pedig minden testvérrel.
Böngésző támogatás
| Króm | Szafari | Firefox | Opera | AZAZ | Android | iOS |
|---|---|---|---|---|---|---|
| Művek | 3.2+ | Művek | 9.5+ | 9+ | Művek | Művek |
:nth-last-of-typea CSS Selectors 3. moduljában vezették be, ami azt jelenti, hogy a böngészők régi verziói nem támogatják. A modern böngészőtámogatás azonban kifogástalan, és az új álválasztókat széles körben használják a gyártási környezetekben. Ha régebbi böngészőtámogatásra van szüksége, vagy töltse ki az IE-t, vagy használja ezeket a választókat nem kritikus módon, fokozatosan továbbfejlesztve, ami ajánlott.