lorem ipsum;

Aenean commodo ligula eget dolor. Vestibulum dapibus nunc ac augue;

Nunc sed turpis. Donec posuere vulputate arcu;

Van egy rész címsorral, alcímmel és több bekezdéssel. Szeretném, ha az első bekezdés egy kicsit kitűnne egy nagyobb, 1,5 em betűmérettel.

Érdemes lehet megpróbálni a p:first-child-kód szakaszt használni, mivel az adott szakasz első bekezdéséhez extra stílust kell adni. De ez nem fog működni, mert a szakasz első gyermeke a h1 . Ebben az esetben a :first-of-type választót kell használni.

Létezik egész sor Az ilyen típusú szelektorok a következők: :first-of-type , :last-of-type , :nth-of-type , és :nth-last-of-type . Úgy viselkednek, mint az :nth-child , de egy adott típusú elem n-edik példányát választják ki.

Leírás

Az :nth-child pszeudoosztály az elemek stílusának hozzáadására szolgál az elemfa számozása alapján.

Szintaxis

elem:nth-child(páratlan | páros |<число> | <выражение>) {...}

Értékek

Ha a nulla, akkor nem íródik ki, és a jelölés b -re redukálódik. Ha b nulla, akkor azt is kihagyjuk, és a kifejezést an formában írjuk. a és b lehetnek negatív számok, ilyenkor a plusz jel mínuszra változik, például: 5n-1.

Ha a és b negatív értékeit használja, néhány eredmény negatív vagy nulla is lehet. Az elemekre azonban csak pozitív értékek vannak hatással, mivel az elemszámozás 1-től kezdődik.

táblázatban. Az 1. ábra néhány lehetséges kifejezést mutat be és kulcsszavakat, és azt is jelzi, hogy mely cikkszámokról lesz szó.

HTML5 CSS3 IE Cr Op Sa Fx

NÁL NÉL ezt a példát 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 kiszínezésére szolgál (1. ábra).

Üdvözöllek a blogomon. Ma arról a témáról szeretnék írni, hogy hogyan válasszuk ki az első szülő elemet a css-ben, mert így kevesebb stílusosztályt használhatunk.

Álosztályok: elsős és elsős, mi a különbség?

A szülőtároló első elemére való hivatkozáshoz a css-ben két pszeudoosztályt találtak ki. Azonnal azt javaslom, hogy mindent egy példával vegyünk figyelembe, hogy megértse:

Tegyük fel, hogy van ilyen jelölésünk. A cél az, hogy az első bekezdésre hivatkozzunk, és a többitől elkülönítve stílusozzuk anélkül, hogy osztályokat adnánk hozzá. Ezt így lehet megtenni:

#wrapper p:first-child(
Piros szín;
}

Az első bekezdés színe pirosra vált, ellenőrizheti.

#wrapper p:first-of-type(
piros szín;
}

Ugyanez fog történni. Szóval mi a különbség? És ez abban rejlik, hogy az első típusú pszeudoosztály megkeresi és megtalálja a szülő első elemét, annak típusától függően, és az első gyermek nem keres semmit - csak a szülő első elemét veszi. találkozik, és ha ez egy bekezdés, akkor stílusokat alkalmaz rá. Ha nem, akkor semmi sem kerül kiválasztásra és alkalmazásra.

Ez egy bekezdés

Ez egy bekezdés

Ez egy bekezdés

Ez egy bekezdés

Ez egy bekezdés

Most fontolja meg: működne-e ebben az esetben az első típus? Igen, mert figyelembe veszi az elem típusát, és az első bekezdést választja ki, nem pedig az első elemet. Az első gyerek dolgozni fog? Próbáld ki. Nem fog működni, mert a bekezdés nem az első elem a szülőben.

Személy szerint nem értettem azonnal a különbséget ezek között az álosztályok között, és egy ideig összezavarodtam, de most remélem, normálisan elmagyaráztam.

Egy másik fontos részlet

Az elemeket a szülőelemtől számítja a rendszer, tehát ha így adta meg:

Li:first-of-type(
…
}

Ezután a törzscímkében (azaz a teljes oldalon) lévő első listaelemek kerülnek kiválasztásra. Így bármely listában az első elem formátuma eltérő lesz.
Ha így írsz:

#sidebar li:first-of-type(
…
}

Ekkor csak az oldalsáv listáinak első elemei, azaz oldalunk oldaloszlopa kerülnek kiválasztásra.

A különféle választókkal, amelyekről írtam, szinte minden elemet elérhet egy weboldalon. Ebben a cikkben többet olvashat arról, hogyan kell dolgozni az n-edik gyermek pszeudoosztállyal a css-ben, és lehetőséget ad az elemek kiválasztására.

Egyébként elfelejtettem megemlíteni az ellentétes pszeudoosztályokat - az utolsó gyereket (illetve az utolsó típust). Lehetővé teszik a szülőtároló utolsó elemének kiválasztását.

Hol tudod átültetni a gyakorlatba

Azért írok ezekről a pszeudoosztályokról, mert aktívan használják őket az elrendezés során css. Itt van az oldalon például egy blokk hasonló bejegyzésekről, megjegyzésekről vagy valami másról. És volt egy ötleted, hogy valahogy különleges módon díszítsd az első elemét. Vagy talán az utolsó. És igen, bárki képes rá.

Csak meg kell találnia annak a blokknak a nevét, amelyben a kívánt elem tárolva van. Tegyük fel, hogy népszerű lemezekkel van dolgunk. A szülőtárolónak van egy népszerű osztálya. Akkor így írunk:

Népszerű li:first-of-type(
Párnázott felsőrész: 20 képpont
}

Minden, a benne lévő lista első eleme felülről kapott behúzást, és amit akarsz, azt hozzáadhatod a stílusokhoz.

Íme egy másik példa. Csak három egyforma szürke blokk van a törzscímkében. Írjunk így.

A pszeudoosztályok segítségével kiválaszthatunk egy adott elemet a listából. Ebben az oktatóanyagban az :nth-child pszeudoosztályról fogunk beszélni, arról, hogy mit hozhat létre ezzel az álosztállyal, és hogyan lehet hasznos. Az :nth-child pszeudoosztály lehetővé teszi egy közös tulajdonságú elemcsoport kiválasztását. Leggyakrabban páros vagy páratlan elemek kiválasztására szolgál egy csoportból. Gyakran használják arra, hogy az asztalt zebrához hasonlítsák azáltal, hogy különböző háttérszíneket adnak a páratlan és páros soroknak.

tr:nth-child (páratlan) ( // háttérszín ) tr:nth-child (páros) ( // másik háttérszín )

Az :nth-child pszeudoosztály azt is 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:

Tr:n-edik gyermek (an+b) ( )

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. Ha az értéket használja 2n+1, akkor az elemek kettes csoportokra lesznek osztva, és az egyes csoportok első elemei, azaz a páratlan sorszámú elemek kerülnek kiválasztásra. Ha az értéket használja 2n+2, akkor az elemek ismét kettes csoportokra lesznek osztva, de most minden csoport második elemei, vagyis a páros sorszámú elemek kerülnek kiválasztásra.

Példaként az :nth-child pszeudoosztály megértéséhez minden negyedik elemet kijelölünk vele, azaz a negyediket, nyolcadikot, tizenkettediket, tizenhatodikat stb. Ehhez az elemeket négyes csoportokra osztjuk és majd minden negyedik elemet jelöljön ki.

Tr:nth-child (4n+4 ) ( // stílus minden negyedik elem )

Az alábbiakban egy tíz elemből álló lista található, és az :nth-child , :first-child és :last-child pszeudoosztályokat használjuk a kiemelni kívánt elemek kiválasztásához.

A CSS:nth-child Pseudo-Class használata egyetlen elem kiválasztásához

Ha az :nth-child pszeudoosztályt számként állítja be, kiválaszthatja, hogy a csoport melyik gyermekére hivatkozzon:

1. elem
2. elem
3. elem
4. elem
5. elem
6. elem
7. elem
8. elem
9. elem
10. elem

#selector_example li:nth-child (4 ) ( betűméret: 150

A CSS:nth-child pszeudoosztály használata az összes elem kiválasztásához, kivéve az első ötöt

Ha az :nth-child pszeudoosztályt az űrlap értékére állítja be n+ számot, az összes elemet kiválaszthatja, kezdve a sorszámmal rendelkező elemtől:

1. elem
2. elem
3. elem
4. elem
5. elem
6. elem
7. elem
8. elem
9. elem
10. elem

#selector_example li:nth-child (n+6 ) ( betűméret: 150 %; font-weight:bold ; szín: zöld; )

A CSS:nth-child pszeudoosztály használata csak az első öt elem kiválasztásához

Amikor az :nth-child pszeudoosztályt negatív értékre állítjuk n+ szám, kijelöljük az összes olyan elemet, amely az ilyen sorszámú elem előtt van:

1. elem
2. elem
3. elem
4. elem
5. elem
6. elem
7. elem
8. elem
9. elem
10. elem

#selector_example li:nth-child (-n+5 ) ( betűméret: 150 %; font-weight:bold ; szín: zöld; )

A CSS:nth-child pszeudoosztály használata minden harmadik elem kiválasztásához

Az :nth-child pszeudoosztály segítségével elemsorozatot választhatunk ki, 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

#selector_example li:nth-child (3n+1 ) ( betűméret: 150 %; font-weight:bold ; szín: zöld; )

A CSS:nth-child pszeudo-osztály használata csak a páratlan elemek kiválasztásához

Az :nth-child pszeudoosztályt páratlanra állíthatja az összes páratlan sorszámú elem kiválasztásához. Vagyis az első, harmadik, ötödik, hetedik, kilencedik stb. elemek. Ez nagyon praktikus 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

#selector_example li:nth-child (páratlan) ( betűméret: 150 %; font-weight:bold ; szín: zöld; )

A CSS:nth-child pszeudoosztály használata csak páros 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

#selector_example li:nth-child (páros) ( betűméret: 150 %; font-weight:bold ; szín: zöld; )

A CSS:first-child Pseudo-Class 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

#selector_example li:first-child ( betűméret: 150 %; font-weight:bold ; szín: zöld; )

A CSS:last-child pszeudo-osztály használata az utolsó elem kiválasztásához

A :first-child pszeudoosztályon kívül van egy :last-child pszeudoosztály, 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

#selector_example li:last-child ( font-size: 150 %; font-weight:bold ; szín: zöld; )

A CSS pszeudo-class:nth-last-child paranccsal válassza ki az utolsó előtti elemet

Használhatja az :nth-last-child pszeudoosztályt is, amely az :last-child és :nth-child pszeudoosztály jellemzőit egyesíti, hogy az elemeket a végétől kezdje számolni. Vagyis számlálással választhat ki egy elemet sorszámokat 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

#selector_example li:nth-last-child (2 ) ( betűméret: 150 %; font-weight:bold ; szín: zöld; )

Nézze meg az :nth-child pszeudoosztályt a "