CSS pszeudoosztályok: n-edik gyermek és n-edik típus. Hogyan válasszuk ki a css-ben a szülő első elemét N-edik gyermek minden negyedik
A pszeudoosztályok segítségével kiválaszthatunk egy adott elemet a listából. Ebben az oktatóanyagban a pszeudoosztály:nth-child-ről fogunk beszélni, arról, hogy mit hozhat létre ezzel az álosztállyal, és hogyan lehet hasznos. Az pszeudo-osztály:nth-child lehetővé teszi, hogy kijelöljön egy közös tulajdonságú elemcsoportot. Leggyakrabban páros vagy páratlan elemek kiválasztására szolgál egy csoportból. Gyakran használják arra, hogy egy asztalt zebrához hasonlítsanak úgy, hogy különböző háttérszíneket adnak a páros és páratlan soroknak.
Egy másik pszeudoosztály:nth-child lehetővé teszi, hogy a közös tulajdonságú elemeket csoportokra ossza, majd mindegyik csoportból válasszon ki egy adott elemet a következő szintaxis használatával:
Itt a meghatározza a csoport elemeinek számát, és b meghatározza, hogy a csoportból melyik elem kerüljön kiválasztásra.
hogy használja-e az értéket 2n+1, akkor az elemek kettes csoportokra lesznek osztva, és az egyes csoportok első elemei kerülnek kiválasztásra, azaz a páratlan sorszámú elemek. Ha az értéket használja 2n+2, akkor az elemek ismét kettes csoportokra lesznek osztva, de most minden csoport második elemei, azaz páros sorszámú elemek kerülnek kiválasztásra.
Egy másik példa a pszeudo-osztály:nth-child megértéséhez, hogy minden negyedik elemet kijelölünk vele, azaz a negyedik, nyolcadik, tizenkettedik, tizenhatodik stb. elemet. Ehhez az elemeket négyes csoportokra osztjuk. majd válassza ki minden negyedik elemet.
Az alábbiakban egy tíz elemből álló lista látható, és az :nth-child, :first-child és :last-child pszeudoosztályokat fogjuk használni a kiemelni kívánt elemek kiválasztásához.
A CSS:nth-child pszeudoosztály használata egyetlen elem kiválasztásához
Ha a pszeudo-class:nth-child értéket ad meg számként, akkor kiválaszthatja, hogy a csoport melyik gyermekét szeretné elérni:
1. elem
2. elem
3. elem
4. elem
5. elem
6. elem
7. elem
8. elem
9. elem
10. elem
A CSS:nth-child pszeudoosztály használata az összes elem kiválasztásához, kivéve az első ötöt
Ha a pszeudoosztály:nth-child-nek megadod az űrlap értékét n+ számot, akkor az összes elemet kiválaszthatja, kezdve az ezzel a sorozatszámmal rendelkező elemmel:
1. elem
2. elem
3. elem
4. elem
5. elem
6. elem
7. elem
8. elem
9. elem
10. elem
A CSS:nth-child pszeudoosztály használata csak az első öt elem kiválasztásához
Amikor a pszeudoosztály:nth-child értéket negatív értékre állítjuk n+ számot, kiválasztjuk az összes elemet, amely az ilyen sorozatszámú elem előtt található:
1. elem
2. elem
3. elem
4. elem
5. elem
6. elem
7. elem
8. elem
9. elem
10. elem
A CSS:nth-child pszeudoosztály használata minden harmadik elem kiválasztásához
Az pszeudoosztály:nth-child segítségével kiválaszthatunk egy elemsorozatot, ha megadjuk, hogy hány elem legyen a sorozatban, és megadjuk a kívánt elem sorszámát. Ha beállítja az értéket 3n+1, minden harmadik elem ki lesz jelölve, az elsőtől kezdve:
1. elem
2. elem
3. elem
4. elem
5. elem
6. elem
7. elem
8. elem
9. elem
10. elem
A CSS:nth-child pszeudoosztály használata csak páratlan elemek kiválasztásához
A pszeudo-class:nth-child paramétert páratlan értékre állíthatja, hogy kijelölje az összes páratlan sorszámú elemet. Vagyis az első, harmadik, ötödik, hetedik, kilencedik stb. elemek. Ez nagyon kényelmes a szomszédos táblázatsorok színének beállításához.
1. elem
2. elem
3. elem
4. elem
5. elem
6. elem
7. elem
8. elem
9. elem
10. elem
A CSS:nth-child pszeudoosztály használata csak páros számú elemek kiválasztásához
Ez a példa ugyanazt mutatja, mint az előző, de ezúttal minden páros elem ki van jelölve. Vagyis a második, negyedik, hatodik, nyolcadik, tizedik stb. elemek:
1. elem
2. elem
3. elem
4. elem
5. elem
6. elem
7. elem
8. elem
9. elem
10. elem
A CSS:first-child pszeudoosztály használata az első elem kiválasztásához
Egy másik pszeudoosztály:first-child kiválasztja az első elemet:
1. elem
2. elem
3. elem
4. elem
5. elem
6. elem
7. elem
8. elem
9. elem
10. elem
A CSS:last-child pszeudoosztály használata az utolsó elem kiválasztásához
A pszeudo-class:first-child mellett van egy pszeudoosztály:last-child, amely az utolsó elemet választja ki egy elemcsoportból:
1. elem
2. elem
3. elem
4. elem
5. elem
6. elem
7. elem
8. elem
9. elem
10. elem
A CSS:nth-last-child pszeudoosztály használata a másodiktól az utolsóig terjedő elem kiválasztásához
Használhatja a pszeudo-class:nth-last-child, amely az álosztályok:last-child és:nth-child képességeit egyesíti, hogy az elemeket a végétől kezdje számolni. Azaz egy elemet úgy jelölhet ki, hogy sorszámokat számol a csoport végéről, például egy tíz elemből álló csoportban kiválaszthatja a második elemet a végéről:
1. elem
2. elem
3. elem
4. elem
5. elem
6. elem
7. elem
8. elem
9. elem
10. elem
Fedezze fel az pszeudoosztály:nth-child képességeit az "nth-child Constructor" segítségével.
Néha az oldalak tervezésekor kicsit „automatizálni” szeretné a CSS stílusokat.
Az egyik probléma, amellyel szembesülhet, az, hogy hogyan jelölje ki egy lista, táblázat, blokk stb. elemeinek páros elemeit egy weboldalon.
Természetesen minden páros elemhez hozzá lehet rendelni egy adott osztályt, de ez akkor jó, ha nincs túl sok elem. Mindezek manuális hozzáadása nem mindig lehetséges és nem mindig kívánatos.
Egy olyan módszerről szeretnék beszélni, amely egy pszeudoosztály használatán alapul n-edik gyermek.
Ezt a pszeudoosztályt a CSS3-ban vezették be, ezért ne feledje, hogy előfordulhat, hogy régebbi böngészőkön nem működik. De a használat során felmerülő lehetőségek nagyon lenyűgözőek.
Ennek a pszeudoosztálynak a gyakorlati használatának egyik módja az, hogy kijelöljük az összes páros számú elemet, amely a HTML dokumentumfában található.
Ennek megvalósítására több lehetőség is kínálkozik. Nézzük meg őket.
1.opció. Használja a páros paramétert.
Tegyük fel, hogy van egy ilyen listánk:
- 1. elem
- 2. elem
- 3. elem
- 4. elem
- 5. elem
- 6. elem
- 7. elem
- 8. elem
- 9. elem
- 10. elem
Ha a listában szereplő összes páros számú elemet pirossal szeretné kiemelni, hozzá kell adnia néhány CSS stílust:
Ul li:n-edik gyermek(páros) (szín:#F00;)
Ennek eredményeként a következő képet kapja.
Az Even egy olyan kulcsszó, amely azt jelenti, hogy páros elemek lesznek kiválasztva.
Gyönyörű megoldás, nem? Csak egy sor CSS-stílus.
2. lehetőség. Használja a 2n paramétert.
Ez az opció alternatívaként használható. A 2n érték azt jelenti, hogy minden második elem kiválasztásra kerül, és minden második elem lényegében páros.
Így használható asztalokhoz.
| 1. oszlop | 2& oszlop. t;td>6 |
| 7 | 7 |
| 8 | 8 |
| 9 | 9 |
És a CSS stílusok
Tr:nth-child(2n) (szín:#F00;)
A szöveg minden páros tr elemben most piros.
webgyry.info
Böngésző támogatás
| 12.0+ | 9.0+ | 3.5+ | 4.0+ | 9.6+ | 3.2+ |
Leírás
A Pseudo-class:nth-child() a gyermekelemeket a szülőelemen belüli pozíciójuk (sorszám) alapján választja ki.
Szintaxis
:nth-child(szám) ( tulajdonságok )Az argumentum zárójelben van feltüntetve, amely lehet szám, kulcsszó vagy numerikus kifejezés an+b formában, ahol a és b egész számok, n pedig egy számláló, amely automatikusan nem negatív egész értékeket vesz fel 0 és több: 0, 1, 2, 3,….
Egy szám segítségével megadhatja annak a gyermekelemnek a sorszámát, amelyre a stílust alkalmazni kívánja:
/* válassza ki a harmadik listaelemet */ ul li:nth-child(3) ( szín: piros; )
Két kulcsszó lehetséges: páratlan (páratlan) és páros (páros). Lehetővé teszik páros vagy páratlan sorszámú gyermekelemek kiválasztását:
/* kijelöli a táblázat összes sorát páratlan sorszámmal */ tr:nth-child(odd) td ( háttérszín: ezüst; )
A kifejezés „an” része a gyermekelemek helyzetét a következő képlettel számítja ki: szám*n, mivel n egy számláló, a 0-tól kezdődő számértékek automatikusan behelyettesítésre kerülnek a számítás során, majd minden alkalommal, amikor az érték növekszik eggyel több, mint az előző: 0,1,2 ,3 stb. Tegyük fel, hogy minden harmadik elemet ki kell választanunk a listában, ehhez csak 3n kell írnunk:
ul li:nth-child(3n) (szín: piros; )
3 * 0 = 0 – nincs kiválasztva
3 * 1 = 3. pont
3 * 2 = 6. pont
stb.
A kifejezés „b” része lehetővé teszi annak megadását, hogy az elemek kiválasztása melyik pozícióból induljon. Tegyük fel, hogy a lista második elemétől kezdve minden harmadik elemet ki kell jelölnünk, ehhez a következő 3n + 2 kifejezést kell írnunk:
Ul li:nth-child(3n + 2) (szín: piros; )
Így a listaelemek a következő képlet alapján kerülnek kiválasztásra:
(3 * 0) + 2 = 2. tétel
(3 * 1) + 2 = 5. pont
(3 * 2) + 2 = 8. pont
stb.
Példa:
| szöveg |
| szöveg |
| szöveg |
| szöveg |
| szöveg |
| szöveg |
| szöveg |
| szöveg |
| szöveg |
| szöveg |
Ennek a példának az eredménye:
puzzleweb.ru
Böngésző támogatás
Kiválasztó: n-edik gyermek
- azon kevés CSS-szelektor egyike, amely szinte teljes mértékben támogatott modern böngészőkés egyáltalán nem támogatja az IE, még az IE8 sem. Ha tehát használatáról van szó, és a végeredmény progresszív fejlesztési technológiával készül, nyugodtan használhatja egyes dizájnelemekhez, például táblázatsorok színezéséhez. Súlyosabb esetekben azonban nem szabad használni. Például támaszkodni rá a webhely elrendezésében, vagy eltávolítani a jobb margót minden harmadik blokkról egy háromszor három rácsban, hogy azok elférjenek egy sorban.
A megváltás itt a jQuery könyvtár, amely támogatja az összes CSS-szelektort, beleértve az:nth-child -t, még az Internet Explorerben is.
web-standards.ru
Jelentés és alkalmazás
Álosztály :nth-child() lehetővé teszi gyermekelemek kiválasztását a szülőelemen belül azok elhelyezésétől függően (sorszám).
Ennek a pszeudoosztálynak a használata széles körben elterjedt; lehetővé teszi a sorstílusok váltogatását a táblázatokban, listákban, a gyermekelemek kombinációjának stílusát stb.
CSS szintaxis:
:nth-child(szám | kulcsszó | képlet)( hirdetésblokk; )Használati példa
Styling sorozatszám szerint
Nézzünk egy példát, amelyben azzal a feladattal kell szembenéznie, hogy módosítsa a stílust a képen narancssárga színnel kiemelt összes elemnél:
Mi a közös a képen kiemelt elemekben? Közös bennük, hogy narancssárgával vannak kiemelve. Vicces? Ne gondolkozz. Még mindig van bennük valami közös, elemek
is megszámolható, és sorszáma a harmadik lesz (a szülő harmadik gyermeke ). Ezen elemek stílusához pszeudoosztályt kell használnunk :n-edik gyermek.
Térjünk át egy példára:
A body címke első h2 fejléce
- egy
- kettő
- három
A body címke második h2 fejléce
A cikkcímke első h2 fejléce
- egy
- kettő
- három
:n-edik gyermek stílusoztuk az elemeket
És
Példánk eredménye:
Stílusozás kulcsszó szerint
Pszeudoosztályértékként :nth-child() nem csak a stílusozandó gyermekelemek sorozatszáma lehet, hanem olyan kulcsszavak is, amelyek egy egész elemcsoportot meghatározhatnak. A kulcsszónak két jelentése lehet:
- páros (páros elemek)
- páratlan (páratlan elemek)
Az elemek kulcsszavak használatával történő stílusozása nagyon széleskörűen alkalmazható, mivel könnyedén kiválaszthatja és stílusozhatja a páros vagy páratlan gyermekelemeket a dokumentumban.
Példaként hozzunk létre két egyszerű táblázatot különböző stílusosztályokkal, és képzeljük el a különbséget az álosztályú kulcsszóértékek használatában :n-edik gyermek HTML elemhez
| 1 sor | Pozíció | Mennyiség |
|---|---|---|
| 2 sor | ||
| 3 sor | ||
| 4 sor | ||
| 5 sor |
| 1 sor | Pozíció | Mennyiség |
|---|---|---|
| 2 sor | ||
| 3 sor | ||
| 4 sor | ||
| 5 sor |
Ebben a példában pszeudo osztályt használunk :nth-child() stilizáltunk még az első táblázat sorai (elemek
Stilizálás egyszerű matematikai képlet segítségével
Álosztály :nth-child() lehetővé teszi nemcsak páros, páratlan vagy gyermekelemek kiválasztását bizonyos sorszámmal, hanem elemi matematikai képlettel meghatározott gyermekelemeket is. Nézzük meg a következő választót, és értsük meg, mit jelent ez a bejegyzés:
td:nth-child(4n+2)- 4n– minden negyedik elem.
- 2
A képletekben lehetőség van kivonás előjelű értékek használatára, de ez általában nem szükséges:
td:nth-child(4n-1)(háttérszín: világoskék; /* a háttérszín beállítása */ )Ez a választó azt jelenti, hogy minden negyedik táblázatcella (
- 4n– minden negyedik elem.
- -1 – melyik elemmel kezdjem.
Nézzünk egy használati példát:
| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 2 | |||||||||||||
| 3 | |||||||||||||
| 4 |
Ebben a példában az pszeudoosztály:nth-child használatával minden negyedik táblázatcellát (
basicweb.ru
Hogyan működik a CSS n-edik gyermekválasztója
A CSS-ben van egy szelektor, pontosabban egy pszeudo-szelektor, az úgynevezett nth-child. Egy példa a használatára:
Ul li:nth-child(3n+3) (szín: #cc; )
A fenti CSS a következőket teszi: Stílus alkalmazása a rendezetlen lista minden harmadik elemére. Mégpedig a 3., 6., 9., 12. stb. De hogyan működik? És azt is, hogy milyen előnyökhöz juthat az n-edik gyermek használata?
A fő jelentés a zárójelben lévő kifejezésben található. Az n-edik gyermek két kulcsszót fogad el: még(még) és páratlan(páratlan). Jelentésük teljesen világos. Páros kiválasztja a páros elemeket (2, 4, 6), az odd pedig a páratlan elemeket (1, 3, 5).
Ahogy a fenti példában is látható, az n-edik gyermek képes kifejezéseket feldolgozni. Mi a lehető legegyszerűbb kifejezés? Csak egy szám. Ha tetszőleges számot ír zárójelbe, akkor egyetlen elem kerül kiválasztásra. Például jelöljük ki a lista ötödik elemét:
Ul li:nth-child(5) (szín: #cc; )
Térjünk vissza az első példánkhoz, amelyben a (3n+3) kifejezést használtuk. Hogyan dolgozik? Miért választ ki minden harmadik elemet? Az egész lényeg az n változóban van. Elfogadja a nullától kezdődő egész értékeket. Nézzük meg közelebbről:
(3 x 0) + 3 = 3 = 3. elem (3 x 1) + 3 = 6 = 6. elem (3 x 2) + 3 = 9 = 9. elem stb.
Most próbáljuk meg a következő kifejezést: nth-child(2n+1) :
(2 x 0) + 1 = 1 = 1. elem (2 x 1) + 1 = 3 = 3. elem (2 x 2) + 1 = 5 = 5. elem stb.
Ennek eredményeként ugyanazt kaptuk, mint az odd esetén, így nincs szükség ilyen kifejezésre gyakran. Sőt, az első példánk is leegyszerűsíthető, és az eredeti (3n+3), kifejezés (3n) helyett használható:
(3 x 0) + 0 = 0 = nincs egyezés (3 x 1) + 0 = 3 = 3. elem (3 x 2) + 0 = 6 = 6. elem stb.
Amint látja, az eredmény ugyanaz, de nem kell „+3”-at írni. Negatív értékeket is használhatunk a kifejezésben. Például 4n-1:
(4 x 0) - 1 = -1 = nincs egyezés (4 x 1) - 1 = 3 = 3. elem (4 x 2) - 1 = 7 = 7. elem stb.
Az n együttható negatív értékeinek használata kissé furcsának tűnik, mert ha az eredmény negatív, akkor nem talál egyezést. A pozitív elemek hozzáadásához folyamatosan módosítania kell a kifejezést. Mint kiderült, ez a megközelítés nagyon kényelmes az első n elem kiválasztásához. Nézzünk egy példát "-n+3"-mal:
0 + 3 = 3 = 3. elem -1 + 3 = 2 = 2. elem -2 + 3 = 1 = 1. elem -3 + 3 = 0 = nincs egyezés
Böngészők közötti kompatibilitás
Az nth-child azon szerencsétlen attribútumok egyike, amely teljesen átmegy a böngészőkön, kivéve az abszolút nullát az IE-ben, még a 8-as verzióban is. Ezért, ha használatáról van szó, ha a várt eredmény valamilyen vizuális effektus (például egy bizonyos táblázat sorainak kiszínezése), akkor ez az ideális megközelítés. De valószínűleg nem érdemes valami fontosabb dologra használni, ami befolyásolhatja például az elrendezés helyességét.
Természetesen ha jQuery-t használsz, akkor nem kell aggódnod, hiszen a jQuery még Internet Explorerben is működik.
És végül
A példaoldalon különböző választó kifejezésekkel játszhat.
www.css-tricks.ru
Értékek
| Jelentése | Leírás |
|---|---|
| Szám | 1-től kezdődő pozitív szám. Megadja az elérni kívánt elem számát. Az elemek számozása 1-től kezdődik. |
| páratlan | Furcsa elemek. |
| még | Egyenletes elemek. |
| Kifejezés | Létrehozhat speciális kifejezéseket az n betűvel, amely az összes egész számot jelöli nulla (nem egyből!) a végtelenig. Tehát a 2n minden páros számot jelent (a másodiktól kezdve). Hogyan kell ezt megérteni? A számokat 0-ról n-re szekvenciálisan helyettesítjük, és így tovább: ha n = 0, akkor 2n 0-t ad - nincs ilyen elem ( az elemek számozása 1-től kezdve!), ha n = 1, akkor 2n 2 - a második elemet adja, ha n = 2, 2n adja 4 - a negyedik elemet. Ha 3n-t írsz, akkor minden harmadik elem lesz (a harmadiktól kezdve!), és így tovább. |
Példák
Példa
Ebben a példában a pirosat li színnek tesszük, ami az 4. leszármazottja szülője (4. az ol-on belül):
A kód végrehajtásának eredménye:
Példa
Most tegyünk mindent pirosra még li:
A kód végrehajtásának eredménye:
Példa
Most tegyünk mindent pirosra páratlan li:
A kód végrehajtásának eredménye:
Példa
Most tegyük pirosra minden harmadik li (a harmadiktól kezdve):
A kód végrehajtásának eredménye:
Példa
A választó megadhat egy sor elemet. Tegyük fel, hogy van egy 20 elemből álló listája, és 7 és 14 között kell kiválasztania az elemeket. Ezt így teheti meg:
A kód végrehajtásának eredménye:
code.mu
Szintaxis
Az n-edik gyermek pszeudoosztály egyetlen argumentummal van megadva, amely az illeszkedő elemek mintáját képviseli.
Kulcsszó értékek
páratlan Olyan elemeket jelöl, amelyek numerikus pozíciója páratlan a testvérek sorozatában: 1, 3, 5 stb. páros Olyan elemeket jelöl, amelyek numerikus pozíciója a testvérek sorozatában páros: 2, 4, 6 stb.Funkcionális jelölés
Formális szintaxis
:nth-child(ahol
ahol
ahol
ahol
Van egy ilyen választó, vagy inkább egy álosztály, az úgynevezett:nth-child . Íme egy példa a használatára:
UL LI:nth-child(3n+3) (szín:#CCC; )
Mit csinál a fenti CSS-kód? A felsorolásjeles listán belül minden harmadik elemet kiválaszt: ez a 3., 6., 9., 12. stb. Nézzük meg pontosan, hogyan működik ez a kifejezés, és mit tehet még az :nth-child kifejezéssel.
Minden attól függ, hogy mi van a zárójelek között. Az:nth-child választó két kulcsszót fogad el: páros és páratlan . Itt minden egyszerű: a páros kiválasztja a páros elemeket, például a 2., 4., 6. stb., az odd pedig páratlan elemeket, például 1., 3., 5. stb. d.
Amint az első példából látható, az :nth-child kifejezéseket is paraméterként vesz fel. Beleértve a legegyszerűbb egyenleteket, más szóval csak számokat. Ha zárójelbe teszi őket, csak egy elem lesz kiválasztva a megfelelő számmal. Például csak az ötödik elem kiválasztásának módja:
UL LI:nth-child(5) (szín:#CCC; )
Térjünk azonban vissza a 3n+3-hoz az első példából. Hogyan működik, és miért van minden harmadik elem kiválasztva? A trükk az n változó és a megadott algebrai egyenlet megértése. Tekintsük n-t egész számok nulla alapú halmazának. Ezután fejezze be az egyenletet. Tehát 3n 3×n, és az egész egyenlet együtt (3×n)+3. Most, ha nullánál nagyobb vagy egyenlő számokat helyettesítünk n helyett, a következőt kapjuk:
- (3 × 0) + 3 = 3 = 3. elem
- (3 × 1) + 3 = 6 = 6. elem
- (3 × 2) + 3 = 9 = 9. elem stb.
Mi a helyzet:nth-child(2n+1) ?
- (2 × 0) + 1 = 1 = 1. elem
- (2 × 1) + 1 = 3 = 3. elem
- (2 × 2) + 1 = 5 = 5. elem stb.
Oké, állj! Ez ugyanaz, mint a furcsa. Akkor talán ne használjuk ezt a kifejezést? De nem bonyolítjuk túl az első példánkat? Mi van, ha 3n+3 helyett 3n+0-t vagy még egyszerűbben 3n-t írunk?
- (3 × 0) = 0 = semmi
- (3 × 1) = 3 = 3. elem
- (3 × 2) = 6 = 6. elem
- (3 × 3) = 9 = 9. elem stb.
Tehát, mint látható, az eredmény ugyanaz lesz, ami azt jelenti, hogy nincs szükség +3-ra. Használhatjuk n negatív értékeit éppúgy, mint kivonást az egyenletekben. Például 4n-1:
- (4 × 0) – 1 = –1 = semmi
- (4 × 1) – 1 = 3 = 3. elem
- (4 × 2) – 1 = 7 = 7. elem stb.
Az -n használata furcsának tűnhet - elvégre, ha a végeredmény negatív, akkor semmilyen elem nem kerül bele a kijelölésbe. De ha hozzáadja az egyenletet, és ismét pozitívvá teszi az eredményt, akkor a minta meglehetősen érdekes lesz: segítségével megkaphatja az első n elemet, például így: -n+3:
- –0 + 3 = 3 = 3. elem
- –1 + 3 = 2 = 2. elem
- –2 + 3 = 1 = 1. elem
- –3 + 3 = 0 = semmi stb.
A SitePointnak van egy szép referenciája egy szép jellel, amit szégyentelenül felteszek ide:
| n | 2n+1 | 4n+1 | 4n+4 | 4n | 5n-2 | -n+3 |
|---|---|---|---|---|---|---|
| 0 | 1 | 1 | 4 | – | – | 3 |
| 1 | 3 | 5 | 8 | 4 | 3 | 2 |
| 2 | 5 | 9 | 12 | 8 | 8 | 1 |
| 3 | 7 | 13 | 16 | 12 | 13 | – |
| 4 | 9 | 17 | 20 | 16 | 18 | – |
| 5 | 11 | 21 | 24 | 20 | 23 | – |
Böngésző támogatás
Az:nth-child Selector egyike azon kevés CSS-választóknak, amelyek szinte teljes mértékben támogatottak a modern böngészőkben, és egyáltalán nem támogatja az IE-t, még az IE8-at sem. Ha tehát használatáról van szó, és a végeredmény progresszív fejlesztési technológiával készül, nyugodtan használhatja egyes dizájnelemekhez, például táblázatsorok színezéséhez. Súlyosabb esetekben azonban nem szabad használni. Például támaszkodni rá a webhely elrendezésében, vagy eltávolítani a jobb margót minden harmadik blokkról egy háromszor három rácsban, hogy azok elférjenek egy sorban.
Leírás
Az :nth-child pszeudoosztály az elemek fa számozása alapján stílust ad az elemekhez.
Szintaxis
elem:nth-child(páratlan | páros |<число> | <выражение>) {...}
Értékek
páratlan Minden páratlan elemszám. páros Minden páros számú elem. szám A gyermekelem sorszáma a szülőhöz viszonyítva. A számozás 1-től kezdődik, ez lesz a lista első eleme. kifejezés Adott an+b , ahol a és b egész számok, n pedig egy számláló, amely automatikusan felveszi a 0, 1, 2 értéket...Ha a nulla, akkor nem íródik ki, és a bejegyzést b-re rövidítjük. Ha b nulla, akkor szintén nincs megadva, és a kifejezés an formában van írva. a és b lehet negatív számok, ebben az esetben a pluszjel mínuszra változik, például: 5n-1.
Negatív a és b értékek használatával néhány eredmény negatív vagy nulla is lehet. Az elemeket azonban csak a pozitív értékek befolyásolják az 1-től kezdődő elemszámozás miatt.
táblázatban Az 1 néhány lehetséges kifejezést és kulcsszót mutat, valamint azt is, hogy mely elemszámok kerülnek felhasználásra.
HTML5 CSS3 IE Cr Op Sa Fx
| 2134 | 2135 | 2136 | 2137 | 2138 | |
| Olaj | 16 | 34 | 62 | 74 | 57 |
| Arany | 4 | 69 | 72 | 56 | 47 |
| Fa | 7 | 73 | 79 | 34 | 86 |
| Kövek | 23 | 34 | 88 | 53 | 103 |
BAN BEN ebben a példában Az :nth-child pszeudoosztály a táblázat első sorának stílusának megváltoztatására, valamint az összes páros sor kiemelésére szolgál (1. ábra).
A CSS nth-child egy pszeudoosztály, amelyet az elemek numerikus kifejezéssel történő kiválasztására használnak. A szintaxisa első pillantásra kissé zavarónak tűnhet.
Ebben a cikkben megnézzük:
- különböző felhasználási módok :nth-child ;
- rugalmasabb választó :nth-of-type ;
- és a kapcsolódó szelektorok :nth-last-child és :nth-last-of-type .
:nth-last-of-type
Az :nth-last-of-type kijelöli a gyermekelemeket, ha azok pozíciója a dokumentumban megegyezik az algebrai kifejezés által leírt mintával.
Az :nth-last-of-type választó valahogy így néz ki:
li:nth-child(kifejezés); ()
A "kifejezést" a páros vagy páratlan kulcsszavak, egész számok vagy egy képlet (például an+b) ábrázolhatják, ahol a és b egész számok, pozitív vagy negatív.
Mivel a CSS n-edik gyermek pszeudoosztálya különféle elemek tartományának kiválasztására használható. Nézzünk néhány példát, hogy világosabb legyen a helyzet.
Nekem van pontozott lista 12 elemből. Nézzük meg, hogyan használhatjuk az :nth-child-et egy adott elem vagy elemkészlet kiválasztására egy minta alapján:
- lorem ipsum
- lorem ipsum
- lorem ipsum
- lorem ipsum
- lorem ipsum
- lorem ipsum
- lorem ipsum
- lorem ipsum
- lorem ipsum
- lorem ipsum
- lorem ipsum
- lorem ipsum
A lista harmadik elemének kiválasztásához meg kell adnia a li:nth-child(3) értéket. Az összes páros elem kiválasztásához használhatja a páros kulcsszót. Ezzel szemben az :nth-child(odd) segítségével kiválaszthatja az összes páratlan számú elemet.
CSS n-edik gyermek minden 3. - adja meg a li:nth-child(3n) . Az első négy elem kiválasztásához használja a li:nth-child(-n+4) parancsot. Az első négy elem kivételével az összes elem kijelöléséhez használja a li:nth-child(n+5) parancsot.
Kifejezés an + b
Alternatív használat kulcsszó Az odd a 2n+1 kifejezést használja. De hogyan működik?
Ha egy an+b formátumú kifejezés nullától eltérő a és b értékeket tartalmaz, a gyerekek csoportokra oszlanak. Ha a kifejezés 2n+1, akkor a gyerekeket kettes csoportokra osztjuk. A csoport minden eleméhez hozzá van rendelve egy index, 1-től kezdve. Minden csoportban a megfelelő elem a b indexszám. Példánkban ez lesz az első elem.
Ha a kifejezés 3n+2 , akkor az elemek három csoportba vannak csoportosítva, és minden csoportban a második elem egyezik a kifejezéssel.
Ha b negatív, akkor a csoport megfelelő eleme a b indexű elem. De az 1-essel ellentétes irányban számolják. Ebben az esetben a megfelelő elem nem ehhez, hanem az előző csoporthoz fog tartozni.
A páros kulcsszó a CSS n-edik gyermekében 2n-ként fejezhető ki. Ebben az esetben b-nek nincs értéke, így az a indexű csoport minden eleme ki van jelölve; A 2n minden második elemet jelöl ki, a 3n minden harmadik elemet, a 4n minden negyediket és így tovább.
Személy szerint nagyon zavarónak tartom azt az elképzelést, hogy a gyermekelemeket csoportokra bontjuk, és minden csoporthoz találjunk megfelelő indexet. Bár a CSS-szelektorok specifikációja pontosan így írja le őket.
Én jobban szeretem azt a koncepciót, hogy minden n-edik elemre keresek – minden 2., 3. vagy 4. stb. És akkor könnyebben el tudom képzelni, hogy a kifejezés második része egy eltolás.
2n+1 esetén ezt a kifejezést a következőképpen olvasom: " Keresse meg minden második elemet, és mozgassa a kijelölést 1-gyel lejjebb».
Ha a kifejezés 3n-5, akkor így fog kinézni: " Keresse meg minden harmadik elemet, és mozgassa a kijelölést 5-tel feljebb».
Egyéb válogatók: n-edik gyermek
Az :nth-child-nek van egy megfelelő pszeudoosztálya :nth-last-child-nek, amely ennek az ellenkezőjét teszi.
A li:nth-last-child(3n) az utolsó gyermektől indul, és visszafelé működik, a lista végétől minden harmadik elemhez illeszkedve.
Ez a pszeudoosztály kevésbé gyakori. Gyakran azonban az elsőt vagy az utolsót kell választani gyermek elem. Ez megtehető az :nth-child(1) vagy az :nth-last-child(1) -vel, de ez a módszer nem olyan gyakori, mint az :first-child és :last-child pszeudoosztály. IE8-ban azonban csak a :first-child működik, de a :last-child és :nth választó nem.
:n-edik típusú
Ami gyakran zavar, az az, hogy a CSS n-edik gyermek pszeudoosztálya index alapján választja ki a gyermekelemeket, és nem veszi figyelembe az elemtípust.
Tekintsük a következő példát.
Aenean commodo ligula eget dolor. Vestibulum dapibus nunc ac augue; Nunc sed turpis. Donec posuere vulputate arcu;lorem ipsum;
Van egy rész címmel, alcímmel és több bekezdéssel. Az első bekezdést szeretném kicsit kiemelni egy nagyobb, 1,5 em betűmérettel.
Kipróbálhatja a p:first-child kódszakaszt, mivel ebben a szakaszban további stílust kell beállítania az első bekezdéshez. De ez nem fog működni, mert a szakasz első gyermekeleme a h1 . Ebben az esetben a :first-of-type választót kell használni.
Létezik egész sor Ennek a típusnak a választói a következők: :first-of-type , :last-of-type , :nth-of-type és :nth-last-of-type . Ugyanúgy viselkednek, mint az :nth-child , de egy adott típusú elem n-edik példányát választják ki.