lorem ipsum;

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

Nunc sed turpis. Donec posuere vulputate arcu;

Je zde oddíl s nadpisem, podnadpisem a několika odstavci. Chci aby první odstavec trochu vynikl větším písmem 1,5em .

Možná budete chtít zkusit použít kód sekce p:first-child, protože do prvního odstavce v této sekci musíte přidat další styl. Ale to nebude fungovat, protože prvním potomkem sekce je h1 . V tomto případě je nutné použít volič :first-of-type.

Existuje celá řada selektory tohoto typu jsou :first-of-type , :last-of-type , :nth-of-type a :nth-last-of-type . Chovají se stejně jako :nth-child , ale vybírají n-té instance prvků určitého typu.

Popis

Pseudotřída :nth-child se používá k přidání stylů do prvků na základě číslování ve stromu prvků.

Syntax

prvek:n-té dítě(liché | sudé |<число> | <выражение>) {...}

Hodnoty

Je-li a nula, pak se nezapisuje a zápis se redukuje na b . Pokud je b nula, pak se také vynechá a výraz se zapíše ve tvaru an . aab mohou být záporná čísla, v takovém případě se znaménko plus změní na mínus, například: 5n-1.

Při použití záporných hodnot pro aab mohou být některé výsledky také záporné nebo nulové. Prvky jsou však ovlivněny pouze kladnými hodnotami, protože číslování prvků začíná od 1.

V tabulce. 1 ukazuje některé možné výrazy a klíčová slova a také uvádí, o která čísla položek se bude jednat.

HTML5 CSS3 IE Cr Op Sa Fx

V tento příklad Pseudotřída :nth-child se používá ke změně stylu prvního řádku tabulky a také k obarvení všech sudých řádků (obrázek 1).

Vítám vás na svém blogu. Rád bych dnes napsal na téma, jak vybrat první nadřazený prvek v css, protože to umožňuje používat méně tříd stylů.

Pseudotřídy: první dítě a první typ, jaký je rozdíl?

Aby bylo možné odkazovat na první prvek z rodičovského kontejneru v css, byly vynalezeny dvě pseudotřídy. Okamžitě navrhuji zvážit vše na příkladu, abyste pochopili:

Řekněme, že máme takové označení. Cílem je odkazovat na první odstavec a stylizovat jej odděleně od ostatních, aniž byste do něj přidávali třídy. To lze provést takto:

#wrapper p:první dítě(
Červená barva;
}

Barva prvního odstavce se změní na červenou, můžete zkontrolovat.

#wrapper p:první typu(
červená barva;
}

Stane se to samé. Jaký je tedy rozdíl? A spočívá v tom, že pseudotřída prvního typu hledá a najde první prvek rodiče, daný jeho typ, a první dítě nehledá nic - prostě vezme první prvek rodiče, který narazí, a pokud je to odstavec, použije na něj styly. Pokud ne, nic nebude vybráno a použito.

Toto je odstavec

Toto je odstavec

Toto je odstavec

Toto je odstavec

Toto je odstavec

Nyní zvažte: fungoval by v tomto případě první typ? Ano, protože bere v úvahu typ prvku a vybere první odstavec, nikoli první ze všech prvků. Bude první dítě pracovat? Zkus to. Nebude to fungovat, protože odstavec není prvním prvkem v nadřazeném prvku.

Osobně jsem hned nepochopil rozdíl mezi těmito pseudotřídami a chvíli jsem byl zmatený, ale teď jsem vám to, doufám, vysvětlil normálně.

Další důležitý detail

Prvky se počítají od nadřazeného prvku, takže pokud jste zadali takto:

Li:první typu(
…
}

Poté budou vybrány první položky seznamu v tagu body (tedy na celé stránce). V každém seznamu bude tedy první položka naformátována jinak.
Pokud píšete takto:

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

Poté budou vybrány pouze první položky seznamů v postranním panelu, tedy postranní sloupec na našem webu.

Pomocí různých selektorů, o kterých jsem psal, můžete dosáhnout téměř jakéhokoli prvku na webové stránce. V tomto článku si můžete přečíst více o tom, jak pracovat s pseudotřídou n-tého dítěte v css, a nabízí vám možnosti výběru prvků.

Mimochodem, zapomněl jsem zmínit opačné pseudotřídy - last-child (resp. last-of-type). Umožňují vám vybrat poslední prvek z nadřazeného kontejneru.

Kde můžete uvést do praxe

Píšu o těchto pseudotřídách, protože se aktivně používají při rozkládání css. Tady máte na stránce třeba blok podobných příspěvků, nebo komentářů, nebo něco jiného. A vy jste měli nápad nějak zvláštním způsobem ozdobit jeho první prvek. Nebo možná poslední. A ano, každý může.

Stačí zjistit název bloku, ve kterém je požadovaný prvek uložen. Řekněme, že máme co do činění s populárními deskami. Nadřazený kontejner má oblíbenou třídu. Pak píšeme takto:

Populární li:first-of-type(
Horní výplň: 20px
}

Všechno, první položka seznamu v něm dostala odsazení shora a do stylů si můžete přidávat, co chcete.

Zde je další příklad. Mám pouze tři stejné šedé bloky ve štítku těla. Pojďme psát takto.

Pseudotřídy lze použít k výběru konkrétního prvku ze seznamu. V tomto tutoriálu budeme hovořit o pseudotřídě :nth-child, o tom, co můžete s touto pseudotřídou vytvořit a jak může být užitečná. Pseudotřída :nth-child umožňuje vybrat skupinu prvků se společnými vlastnostmi. Nejčastěji se používá k výběru sudých nebo lichých prvků ze skupiny. Často se používá k tomu, aby stůl vypadal jako zebra tím, že dává různé barvy pozadí lichým a sudým řádkům.

tr:nth-child (liché) ( // barva pozadí ) tr:nth-child (sudé) ( // jiná barva pozadí )

Pseudotřída :nth-child také umožňuje rozdělit prvky se společnou vlastností do skupin a poté vybrat konkrétní prvek z každé skupiny pomocí následující syntaxe:

Tr:n-té dítě (an+b) ( )

Tady A určuje počet prvků ve skupině a b určuje, který prvek ze skupiny bude vybrán. Pokud použijete hodnotu 2n+1, pak budou prvky rozděleny do skupin po dvou a budou vybrány první prvky z každé skupiny, tj. prvky s lichým pořadovým číslem. Pokud použijete hodnotu 2n+2, pak budou prvky opět rozděleny do skupin po dvou, ale nyní budou vybrány druhé prvky z každé skupiny, tedy prvky se sudým pořadovým číslem.

Jako příklad pro pochopení pseudotřídy :nth-child vybereme s ní každý čtvrtý prvek, tedy čtvrtý, osmý, dvanáctý, šestnáctý atd. K tomu rozdělíme prvky do skupin po čtyřech a pak vyberte každý čtvrtý prvek.

Tr:nth-child (4n+4) ( // styl každého čtvrtého prvku )

Níže je seznam deseti prvků a k výběru prvků, které chceme zvýraznit, použijeme pseudotřídy :nth-child , :first-child a :last-child.

Použití CSS:nth-child Pseudo-Class k výběru jednoho prvku

Nastavením pseudotřídy :nth-child jako čísla si můžete vybrat, na které dítě ze skupiny se budete odkazovat:

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

#selector_example li:nth-child (4) ( velikost-fontu: 150

Použití CSS:nth-child Pseudo-Class k výběru všech prvků kromě prvních pěti

Pokud nastavíte pseudotřídu :nth-child na hodnotu formuláře n+číslo, můžete vybrat všechny prvky, počínaje prvkem s tímto pořadovým číslem:

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

#selector_example li:nth-child (n+6) ( velikost písma: 150 %; font-weight:bold ; barva:zelená; )

Použití CSS:nth-child Pseudo-Class k výběru pouze prvních pěti prvků

Když nastavíme pseudotřídu :nth-child na zápornou hodnotu n+číslo, vybereme všechny prvky, které jsou před prvkem s tímto pořadovým číslem:

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

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

Použití CSS:nth-child Pseudo-třída k výběru každého třetího prvku

Pseudotřída :nth-child může být použita k výběru posloupnosti prvků zadáním počtu prvků v posloupnosti a ordinálním číslem požadovaného prvku. Pokud nastavíte hodnotu 3n+1, bude vybrán každý třetí prvek, počínaje prvním:

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

#selector_example li:nth-child (3n+1) ( velikost písma: 150 %; font-weight:bold ; barva:zelená; )

Použití CSS:nth-child pseudotřídy k výběru pouze lichých prvků

Pseudotřídu :nth-child můžete nastavit na lichou, abyste vybrali všechny prvky s lichými pořadovými čísly. Tedy první, třetí, pátý, sedmý, devátý atd. prvek. To je velmi užitečné pro nastavení barev pro sousední řádky tabulky.

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

#selector_example li:nth-child (liché) (velikost písma: 150 %; font-weight:bold ; barva:zelená; )

Použití CSS:nth-child pseudotřídy k výběru pouze sudých prvků

Tento příklad ukazuje totéž jako předchozí, ale tentokrát jsou vybrány všechny sudé prvky. To znamená, že druhý, čtvrtý, šestý, osmý, desátý atd. prvek:

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

#selector_example li:nth-child (sudé) ( font-size: 150 %; font-weight:bold ; barva:zelená; )

Použití CSS:first-child Pseudo-Class k výběru prvního prvku

Další pseudotřída:první dítě vybere první prvek:

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

#selector_example li:first-child (velikost písma: 150 %; font-weight:bold ; barva:zelená; )

Použití CSS:last-child Pseudo-třída k výběru posledního prvku

Kromě pseudotřídy :first-child existuje pseudotřída :last-child, která vybere poslední prvek ze skupiny prvků:

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

#selector_example li:last-child (velikost-fontu: 150 %; font-weight:bold ; barva:zelená; )

Pomocí CSS pseudo-class:nth-last-child vyberte předposlední prvek

Můžete také použít pseudotřídu :nth-last-child, která kombinuje schopnosti pseudotříd :last-child a :nth-child a začít počítat prvky od konce. To znamená, že můžete vybrat prvek počítáním pořadová čísla od konce skupiny, například ve skupině deseti prvků, můžete vybrat druhý prvek od konce:

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

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

Podívejte se na pseudotřídu :nth-child s "