: n-edik típus - CSS-trükkök

A :nth-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.

Tegyük fel, hogy rendezetlen listánk van, és váltakozó listaelemeket szeretnénk „zebracsíkkal” ellátni:

First Item
Second Item
Third Item
Fourth Item
Fifth Item

Ahelyett, hogy osztályokat adnánk az egyes listaelemekhez (pl. .even& .odd), Használhatjuk :nth-of-type:

li ( background: slategrey; ) /* select alternating items starting with the second item */ li:nth-of-type(2n) ( background: lightslategrey; )

Amint láthatja, :nth-of-typeargumentumot vesz fel: ez lehet egyetlen egész szám, a „páros” vagy a „páratlan” kulcsszavak, vagy a fenti képlet. Ha egész szám van megadva, csak egy elem van kijelölve, de a kulcsszavak vagy a képlet végigvezetik a szülőelem összes gyermekét, és kiválasztanak egyező elemeket - hasonlóan a tömb elemeinek navigálásához a JavaScript-ben. A „páros” és a „páratlan” kulcsszavak egyértelműek, de a képletet a szintaxis felhasználásával állítják össze 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-of-typeválasztókról:

Nézze meg ezt a tollat!

Szerencsére nem mindig kell magának :nth-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-of-typea forrásrend tetejétől kezdődő elemeken keresztül iterál. Az egyetlen különbség közte és :nth-last-of-typeaz, hogy az utóbbi a forrásrend aljától kezdődő elemeken keresztül iterál.
• A :nth-of-typeválasztó nagyon hasonló, :nth-childde egyetlen kritikus különbséggel: specifikusabb. A fenti példánkban ugyanazt az eredményt produkálnák, mert csak lielemeket ismételünk , de ha egy összetettebb testvércsoporton keresztül ismételnénk, :nth-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-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-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.