: n-dik gyermek - CSS-trükkök

Anonim

A :nth-childválasztó lehetővé teszi egy vagy több elem kiválasztását a forrás sorrendje alapján, egy képlet alapján.

/* Select the first list item */ li:nth-child(1) ( ) /* Select the 5th list item */ li:nth-child(5) ( ) /* Select every other list item starting with first */ li:nth-child(odd) ( ) /* Select every 3rd list item starting with first */ li:nth-child(3n - 2) ( ) /* Select every 3rd list item starting with 2nd */ li:nth-child(3n - 1) ( ) /* Select every 3rd child item, as long as it has class "el" */ .el:nth-child(3n) ( )

A CSS Selectors 3. szintű specifikációja „strukturális álosztály” -ként van meghatározva, 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 CSS-hálózatot építünk, és szeretnénk eltávolítani a margót minden negyedik rácsmodulról. Itt van ez a HTML:

 One Two Three Four Five

Ahelyett, hogy osztályt adnánk minden negyedik elemhez (pl. .last), Használhatjuk :nth-child:

.module:nth-child(4n) ( margin-right: 0; )

A :nth-childszelektor vesz egy érv: ez lehet egyetlen egész szám, a kulcsszavakat even, oddvagy egy általános 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 JavaScript tömb elemeinek navigálásához. A „páros” és a „páratlan” kulcsszavak egyértelműek (2, 4, 6 stb. Vagy 1, 3, 5). 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 negyedik elemet kiválasztottuk a képlettel 4n, ami azért működött, mert minden egyes elem ellenőrzésénél az „n” eggyel nőtt (4 × 0, 4 × 1, 4 × 2, 4 × 3 stb.). Ha egy elem sorrendje megegyezik az egyenlet eredményével, akkor kiválasztásra kerül (4, 8, 12 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-childválasztókról:

Szerencsére nem mindig kell magának :nth-childmatekoznia - több tesztelő és generátor is van ott:

  • CSS-trükkök tesztelője
  • Lea Verou tesztelője

: n-dik gyermek (an + b)

Van egy kevéssé ismert szűrő, amelyhez hozzá lehet adni :nth-childa CSS Selectors specifikációt: Lehetőség :nth-childaz elemek egy részhalmazának kiválasztására a of formátum használatával. Tegyük fel, hogy van vegyes tartalmú listája: Van, akinek az osztálya van .video, van, akinek az osztálya .picture, és ki szeretné választani az első 3 képet. Ezt megteheti a „of” szűrővel, így:

:nth-child(-n+3 of .picture) ( /* Selects the first 3 elements applied not to ALL children but only to those matching .picture */ )

Ne feledje, hogy ez különbözik attól, hogy egy választót közvetlenül a :nth-childválasztóhoz fűz:

.picture:nth-child(-n+3) ( /* Not the same! This applies to elements matching .picture which _also_ match :nth-child(-n+3) */ )

Ez kissé zavaros lehet, így egy példa segíthet szemléltetni a különbséget:

A „of” szűrő böngészőtámogatása nagyon korlátozott: Az írás kezdetén csak a Safari támogatta a szintaxist. Kedvenc böngészőjének állapotának ellenőrzéséhez íme az alábbiakkal kapcsolatos nyitott kérdések :nth-child(an+b of s):

  • Firefox: Az n-edik gyermek támogatása (a + B + sel)
  • Chrome: Megvalósítás: n -edik gyermek (S + b + S)

Látványosság

  • :nth-childa forrásrend tetejétől kezdődő elemeken keresztül iterál. Az egyetlen különbség közte és :nth-last-childaz, hogy az utóbbi a forrásrend aljától kezdődő elemeken keresztül iterál.
  • Az első nszámú elem kiválasztásának szintaxisa kissé ellentmondásos. Először -nplusz a kiválasztani kívánt elemek pozitív számával. Például li:nth-child(-n+3)kiválasztja az első 3 lielemet.
  • A :nth-childválasztó nagyon hasonló, :nth-of-typede egy kritikus különbséggel: kevésbé specifikus. A fenti példánkban ugyanazt az eredményt produkálnák, mert csak .moduleelemeket 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, :nth-childhogy bármely testvér elemet kiválaszthat egy elrendezésben, nem csak a kettőspont előtt megadott elemeket.

Böngésző támogatás

Króm Szafari Firefox Opera AZAZ Android iOS
Bármi 3.2+ Bármi 9.5+ 9+ Bármi Bármi

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