Na výber je možné použiť pseudotriedy konkrétny prvok zo zoznamu. V tomto tutoriále budeme hovoriť o: n-tej detskej pseudotriede, čo môžete s touto pseudotriedou vytvoriť a ako to môže byť užitočné. Pseudotrieda: n-child vám umožňuje vybrať skupinu prvkov so spoločnými vlastnosťami. Najčastejšie sa používa na výber nepárnych alebo párnych položiek zo skupiny. Často sa používa na to, aby tabuľka vyzerala ako zebra priradením rôznych farieb pozadia nepárnym a párnym riadkom.

Tr: n-dieťa (nepárne) (// farba pozadia) tr: n-te-dieťa (párne) (// iná farba pozadia)

Ďalšia pseudotrieda: nth-child vám umožňuje rozdeliť prvky so spoločnou vlastnosťou do skupín a potom vybrať konkrétny prvok z každej skupiny pomocou nasledujúcej syntaxe:

Tr: n-te dieťa (an + b) ()

Tu a určuje počet prvkov v skupine a b určuje, ktorý prvok zo skupiny bude vybratý. Ak použijeme hodnotu 2n + 1, potom sa prvky rozdelia do skupín po dvoch a vyberú sa prvé prvky z každej skupiny, to znamená prvky s nepárnym radovým číslom. Ak použijeme hodnotu 2n + 2, potom budú prvky opäť rozdelené do skupín po dvoch, ale teraz budú vybrané druhé prvky z každej skupiny, to znamená prvky s párnym radovým číslom.

Na pochopenie pseudo triedy: n-teho dieťaťa ju použijeme na výber každého štvrtého prvku, to znamená štvrtého, ôsmeho, dvanásteho, šestnásteho atď. Na tento účel rozdeľte prvky do skupín po štyroch. a potom vyberte každý štvrtý prvok.

Tr: nth-child (4n + 4) (// štýl každý štvrtý prvok)

Nasleduje zoznam desiatich prvkov a na výber prvkov, ktoré chceme zvýrazniť, použijeme pseudotriedy: nth-child ,: first-child a: last-child.

Použitie pseudotriedy CSS: n-ty-dieťa na výber jedného prvku

Nastavením pseudotriedy: n-dieťa na číslo môžete vybrať, na ktoré dieťa v skupine sa má odkazovať:

Prvok 1
Prvok 2
Prvok 3
Prvok 4
Prvok 5
Prvok 6
Prvok 7
Prvok 8
Prvok 9
Prvok 10

#selector_example li: nth-child (4) (font-size: 150

Použitie pseudotriedy CSS: n-ty-dieťa na výber všetkých prvkov okrem prvých piatich

Ak nastavíte pseudotriedu: n-ty-dieťa na hodnotu formulára n +číslo, môžete vybrať všetky prvky začínajúce prvkom s týmto radovým číslom:

Prvok 1
Prvok 2
Prvok 3
Prvok 4
Prvok 5
Prvok 6
Prvok 7
Prvok 8
Prvok 9
Prvok 10

#selector_example li: nth-child (n + 6) (font-size: 150 %; font-weight: bold; farba: zelená; )

Použitie pseudotriedy CSS: n-ty-dieťa na výber iba prvých piatich prvkov

Keď nastavíme pseudotriedu: n-te dieťa na záporné n +číslo, vyberieme všetky prvky, ktoré sú pred prvkom s týmto radovým číslom:

Prvok 1
Prvok 2
Prvok 3
Prvok 4
Prvok 5
Prvok 6
Prvok 7
Prvok 8
Prvok 9
Prvok 10

#selector_example li: nth-child (-n + 5) (font-size: 150 %; font-weight: bold; farba: zelená; )

Pomocou CSS pseudotriedy: n-ty-dieťa vyberte každý tretí prvok

Pseudotriedu: n-dieťa je možné použiť na výber sekvencie prvkov zadaním počtu prvkov v sekvencii a poradového čísla požadovaného prvku. Ak nastavíte hodnotu 3n + 1, bude vybraná každá tretia položka, počnúc prvou:

Prvok 1
Prvok 2
Prvok 3
Prvok 4
Prvok 5
Prvok 6
Prvok 7
Prvok 8
Prvok 9
Prvok 10

#selector_example li: nth-child (3n + 1) (font-size: 150 %; font-weight: bold; farba: zelená; )

Použitie pseudotriedy CSS: n-ty-dieťa na výber iba nepárnych prvkov

Môžete nastaviť: n-detskú pseudotriedu na nepárne (nepárne), aby sa vybrali všetky nepárne položky. To znamená prvý, tretí, piaty, siedmy, deviaty atď. Je veľmi výhodné nastaviť farby pre susedné riadky tabuľky.

Prvok 1
Prvok 2
Prvok 3
Prvok 4
Prvok 5
Prvok 6
Prvok 7
Prvok 8
Prvok 9
Prvok 10

#selector_example li: nth-child (odd) (font-size: 150 %; font-weight: bold; farba: zelená; )

Použitie CSS pseudotriedy: n-ty-dieťa na výber iba párnych prvkov

Tento príklad ukazuje to isté ako predchádzajúci, ale tentoraz sú vybraté všetky položky s párnymi číslami. To znamená, že druhý, štvrtý, šiesty, ôsmy, desiaty atď. Prvkov:

Prvok 1
Prvok 2
Prvok 3
Prvok 4
Prvok 5
Prvok 6
Prvok 7
Prvok 8
Prvok 9
Prvok 10

#selector_example li: nth-child (even) (font-size: 150 %; font-weight: bold; farba: zelená; )

Použitie CSS pseudo-triedy: first-child na výber prvého prvku

Ďalšia pseudotrieda: prvé dieťa vyberie prvý prvok:

Prvok 1
Prvok 2
Prvok 3
Prvok 4
Prvok 5
Prvok 6
Prvok 7
Prvok 8
Prvok 9
Prvok 10

#selector_example li: first-child (font-size: 150 %; font-weight: bold; farba: zelená; )

Použitie CSS pseudotriedy: last-child na výber posledného prvku

Okrem pseudo-triedy: prvého dieťaťa existuje ešte: pseudo-trieda: posledné dieťa, ktorá vyberie posledný prvok zo skupiny prvkov:

Prvok 1
Prvok 2
Prvok 3
Prvok 4
Prvok 5
Prvok 6
Prvok 7
Prvok 8
Prvok 9
Prvok 10

#selector_example li: last-child (font-size: 150 %; font-weight: bold; farba: zelená; )

Použitie CSS pseudotriedy: n-ty-posledný-dieťa na výber predposledného prvku

Môžete tiež použiť pseudotriedu: n-ty-posledné-dieťa, ktorá kombinuje schopnosti pseudotried: posledného dieťaťa a: n-teho dieťaťa a začať počítať od konca. To znamená, že prvok môžete vybrať počítaním radových čísiel od konca skupiny, napríklad v skupine desiatich prvkov môžete vybrať druhý prvok od konca:

Prvok 1
Prvok 2
Prvok 3
Prvok 4
Prvok 5
Prvok 6
Prvok 7
Prvok 8
Prvok 9
Prvok 10

#selector_example li: nth-last-child (2) (font-size: 150 %; font-weight: bold; farba: zelená; )

Pozrite sa na možnosti: n-tej detskej pseudotriedy s „

Popis

Pseudotrieda: n-dieťa sa používa na štylizáciu prvkov na základe číslovania v strome prvkov.

Syntax

prvok: n-te dieťa (nepárne | párne |<число> | <выражение>) {...}

Hodnoty

nepárne Všetky nepárne čísla prvkov. párne Všetky párne čísla prvkov. číslo Poradové číslo dieťaťa vzhľadom na jeho rodiča. Číslovanie začína od 1, toto bude prvá položka v zozname. výraz Špecifikovaný ako + b, kde a a b sú celé čísla an je počítadlo, ktoré automaticky nadobúda hodnotu 0, 1, 2 ...

Ak sa a rovná nule, potom sa nezapíše a záznam sa skráti na b. Ak sa b rovná nule, potom tiež nie je uvedené a výraz je napísaný vo forme an. a a b môžu byť záporné čísla, v takom prípade sa znamienko plus zmení na mínus, napríklad: 5n-1.

Použitím záporných hodnôt pre a a b môžu byť niektoré výsledky aj záporné alebo nulové. Položky sú však ovplyvnené iba kladnými hodnotami, pretože číslovanie položiek začína od 1.

Tabuľka Tabuľka 1 uvádza niektoré možné výrazy a kľúčové slová a uvádza, ktoré čísla položiek sa použijú.

HTML5 CSS3 IE Cr Op Sa Fx

	2134	2135	2136	2137	2138
Olej	16	34	62	74	57
Zlato	4	69	72	56	47
Drevo	7	73	79	34	86
Kamene	23	34	88	53	103

V. tento príklad Pseudotrieda: n-dieťa sa používa na zmenu štýlu prvého riadka tabuľky a na vyfarbenie všetkých párnych riadkov (obrázok 1).

Vítam vás na mojom blogu. Dnes by som chcel napísať na tému, ako vybrať prvý nadradený prvok v css, pretože to umožňuje používať menej tried štýlu.

Pseudotriedy: prvé dieťa a prvý typ, aký je rozdiel?

Aby sa odkazovalo na prvý prvok z nadradeného kontajnera v css, boli vynájdené dve pseudotriedy. Okamžite navrhujem zvážiť všetko na príklade, aby ste porozumeli:

Povedzme, že máme také značenie. Cieľom je odkázať na prvý odsek a štylizovať ho oddelene od ostatných bez toho, aby ste doň pridali triedy. Môžete to urobiť takto:

#wrapper p: prvé dieťa (
Farba: červená;
}

Farba prvého odseku sa zmení na červenú, môžete to skontrolovať.

#wrapper p: prvý typu (
farba: červená;
}

To isté sa stane. Aký je teda rozdiel? A spočíva v tom, že pseudotriedny prvý typ hľadá a nachádza prvý prvok rodiča, vzhľadom na jeho typ, a prvé dieťa nič nehľadá-berie iba prvý prvok rodiča a ak je to odsek, použije na to štýly. Ak nie, nič sa nevyberie a nepoužije.

Teraz premýšľajte: bude v tomto prípade fungovať prvý typ? Áno, pretože berie do úvahy typ prvku a vyberie prvý odsek, a nie prvý zo všetkých prvkov vôbec. Bude prvé dieťa fungovať? Skús to. Zlyhá, pretože odsek nie je prvou položkou v nadradenej položke.

Osobne som okamžite nepochopil rozdiel medzi týmito pseudotriedami a chvíľu som bol zmätený, ale teraz som vám to, dúfam, normálne vysvetlil.

Ďalší dôležitý detail

Prvky sa počítajú z nadradeného prvku, takže ak ste zadali takto:

Li: prvý typu (
…
}

Potom sa vyberú prvé položky zoznamov v značke tela (to znamená na celej stránke). V každom zozname bude mať teda prvá položka iný formát.
Ak píšeš takto:

#sidebar li: prvý typu (
…
}

Potom budú vybraté iba prvé položky zoznamov na bočnom paneli, to znamená bočný stĺpec na našom webe.

Pomocou rôznych selektorov, o ktorých som písal, môžete na webovej stránke dosiahnuť takmer akýkoľvek prvok. V tomto článku sa môžete dozvedieť viac o tom, ako pracovať s pseudotriedou n-tého dieťaťa v css, a poskytuje vám možnosti týkajúce sa výberu prvkov.

Mimochodom, zabudol som spomenúť opačné pseudotriedy-posledné dieťa (respektíve posledné typu). Umožňujú vám vybrať poslednú položku z nadradeného kontajnera.

Kde môžete využiť v praxi

Píšem o týchto pseudotriedach, pretože sa aktívne používajú v rozložení s pomocou css... Tu máte na stránke napríklad blok podobných príspevkov alebo komentáre alebo niečo iné. A dostali ste nápad navrhnúť jeho prvý prvok špeciálnym spôsobom. Alebo možno posledný. Každopádne môže ktokoľvek.

Stačí zistiť názov bloku, v ktorom je požadovaný prvok uložený. Povedzme, že máme do činenia s populárnymi záznamami. Nadradený kontajner má triedu nazývanú populárny. Potom napíšeme takto:

Populárne li: prvý typ (
Výplň: 20px;
}

To je všetko, prvá položka v zozname bola odsadená zhora, ale do štýlov môžete pridať čokoľvek chcete.

Tu je ďalší príklad. V tagu body mám iba tri identické šedé bloky. Napíšme to takto.

CSS n-child je pseudotrieda, ktorá sa používa na výber položiek pomocou číselného výrazu. Jeho syntax sa môže na prvý pohľad zdať trochu mätúca.

V tomto článku sa pozrieme na:

• rôzne spôsoby použitia: n-dieťa;
• flexibilnejší volič: n-tý-typ;
• a ich príbuzné selektory: n-té-posledné-dieťa a: n-té-posledné-typu.

: n-ty-posledny-typu

: n-ty-posledný-typu vyberie deti, ak sa ich pozícia v dokumente zhoduje so vzorcom opísaným algebraickým výrazom.

Selektor: n-ty-posledný-typu vyzerá asi takto:

li: nth-child (výraz); ()

„Výraz“ môžu predstavovať kľúčové slová párne alebo nepárne, celé číslo alebo vzorec ako + b, kde a a b sú celé čísla, pozitívne alebo negatívne.

Ako CSS pseudo triedu deviateho dieťaťa je možné použiť na výber radu rôznych prvkov. Pozrime sa na niekoľko príkladov, aby to bolo jasnejšie.

Mám zoznam s odrážkami 12 položiek. Pozrime sa, ako môžete použiť: nth-child na výber konkrétneho prvku alebo sady prvkov zo vzoru:

• lorem ipsum
• lorem ipsum
• lorem ipsum
• lorem ipsum
• lorem ipsum
• lorem ipsum
• lorem ipsum
• lorem ipsum
• lorem ipsum
• lorem ipsum
• lorem ipsum
• lorem ipsum

Ak chcete vybrať tretiu položku v zozname, musíte zadať li: nth-child (3). Na výber všetkých párnych položiek môžete použiť kľúčové slovo párne. Naopak, na výber všetkých nepárne číslovaných položiek môžete použiť: n-te dieťa (nepárne).

CSS n -te dieťa každé tretie - zadajte li: n -te dieťa (3n). Ak chcete vybrať prvé štyri prvky, použite li: nth-child (-n + 4). Ak chcete vybrať všetky prvky okrem prvých štyroch, môžete použiť li: nth-child (n + 5).

Výraz an + b

Alternatívou k použitiu kľúčového slova nepárne je použiť výraz 2n + 1. Ako to však funguje?

Keď výraz vo formáte an + b obsahuje nenulové hodnoty pre a a b, deti sú rozdelené do skupín. Ak je výraz 2n + 1, deti sú rozdelené do dvoch skupín. Každému prvku v skupine je priradený index začínajúci sa 1. Zodpovedajúcim prvkom v každej skupine je indexové číslo b. V našom prípade to bude prvá položka.

Ak je výraz 3n + 2, prvky sú zoskupené podľa troch a druhý prvok v každej skupine sa zhoduje s výrazom.

Ak je b záporné, zodpovedajúcou položkou v skupine je položka v indexe b. Počíta sa však v opačnom smere od indexu 1. V tomto prípade príslušný prvok nebude patriť do tejto, ale do predchádzajúcej skupiny.

Párne kľúčové slovo v CSS n -tom dieťati môže byť vyjadrené ako 2n. V tomto prípade nemáme hodnotu pre b, takže je vybratý každý prvok skupiny s indexom a; 2n vyberie každý druhý prvok, 3n vyberie každý tretí, 4n vyberie každý štvrtý atď.

Osobne považujem koncept rozdelenia detí do skupín a nájdenie indexu zhody pre každú skupinu za veľmi mätúci. Aj keď ich takto popisuje špecifikácia selektorov CSS.

Páči sa mi koncept nájdenia každého n -tého prvku - každého druhého, tretieho alebo štvrtého atď. A potom si už jednoduchšie predstavujem, že druhou časťou výrazu je ofset.

V prípade 2n + 1 som prečítal tento výraz takto: „ Nájdite každý druhý prvok a posuňte výber nadol o 1».

Ak je výraz 3n-5, bude znieť takto: „ Nájdite každý tretí prvok a posuňte výber o 5 vyššie».

Ostatní selektori: n-dieťa

: n-te dieťa má zodpovedajúcu pseudotriedu: n-té posledné dieťa, ktoré funguje naopak.

li: nth-last-child (3n) začína od posledného dieťaťa a spracováva ich spätne, pričom zodpovedá každému tretiemu prvku z konca zoznamu.

Táto pseudotrieda je menej bežná. Často je však potrebné vybrať prvé alebo posledné dieťa. To je možné vykonať pomocou: n-teho dieťaťa (1) alebo: n-tého posledného dieťaťa (1), ale táto metóda nie je taká bežná ako pseudotriedy: prvé dieťa a: posledné dieťa. To znamená, že iba: prvé dieťa funguje v IE8, zatiaľ čo: selektory posledného dieťaťa a: n-té nie.

: n-tý typu

S čím často nie som spokojný, je to, že n-ta detská pseudotrieda CSS vyberá deti podľa indexu a nezohľadňuje typ prvku.

Zvážte nasledujúci príklad.

lorem ipsum;

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

Nunc sed turpis. Donec posuere vulputate arcu;

Existuje časť s nadpisom, podnadpisom a niekoľkými odsekmi. Chcem, aby prvý odsek trochu vynikol so zvýšenou veľkosťou písma o 1,5 em.

Môžete skúsiť použiť sekciu p: kód prvého dieťaťa, pretože pre prvý odsek v tejto časti musíte nastaviť ďalší štýl. Ale to nebude fungovať, pretože prvé dieťa sekcie je h1. V takom prípade musíte použiť: volič prvého typu.

Existuje niekoľko selektorov tohto typu-: prvý z typu,: posledný z typu,: n-tý-typ a: n-tý-posledný-z typu. Správajú sa rovnako ako: n-té dieťa, ale vyberajú n-té inštancie prvkov konkrétneho typu.