První potomek, selektor CSS (první dítě), nám umožňuje aplikovat styl prvního prvku přímo na druhý prvek. Podle specifikace CSS Selectors Level 3 je označována jako strukturální pseudotřída, protože zakládá styl jakéhokoli obsahu na tom, jak souvisí s nadřazeným a sourozeneckým obsahem.

Syntax

 :first-child { //property } 

Příklad

 h1:first-child { color: blue; } <p> <span>Let&apos;s get started</span></p> 

Výstup

Vysvětlení:

1. Dvě značky div tvoří blok těla ve výše uvedeném kódu.
2. Existuje mnoho značek odstavce

   s různými přichytávacími tagy uvnitř prvního prvku div.

3. Značka záhlaví a značka odstavce

   s tagem snap jsou oba zahrnuty do druhého tagu div.

4. Použili jsme interní nebo vložené CSS uvnitř bloku hlavy a stylizovali jsme tag snap v tagu odstavce. Nejsme však povinni vytvořit třídu pro tag snap; místo toho můžeme použít selektor prvního potomka (p:first-child) k okamžité identifikaci prvního prvku tagu snap uvnitř prvního tagu div. Počátečnímu prvku (snapu) můžeme dát nějaký styl. V odstavci jsou dva přichytávací tagy, ale jak vidíme, pouze první tag je stylizovaný a ostatní byly ignorovány.
5. Můžeme vidět, jak první dítě hledalo první tag snap a stylovalo ho do druhého tagu div. Prvek musí být prvním prvkem mezi svými sourozenci v nadřazené značce, na který bude cílit první podřízený prvek; jinak nebude vybrán.

Za použitíZnačka řádku

Pomocí značky řádku, můžeme použít prvního potomka CSS. V důsledku toho, pokud použijeme styl na značku řádku pomocí prvního podřízeného selektoru, styl bude upraven pouze pro značku prvního řádku a zbytek značky řádku nebude upraven. První podřízený prvek bude cílit na prvek prvního řádku v rámci rodičovské značky a zbytek bude ignorován.

Syntax

 tr:first-child{ //CSS declarations with style properties; } 

Příklad

Pro lepší pochopení se podívejme na příklad prvního podřízeného CSS pomocí značky řádkuv CSS.

 Example of First Child in CSS using row tag tr:first-child { font-size: 40pixels; color: black; background-color: lightblue; } <table class="table"> <tr> <th>Name</th> <th>ID</th> <th>Branch</th> </tr> <tr> <th>Priya</th> <th>123</th> <th>CSE</th> </tr> <tr> <th>John</th> <th>435</th> <th>ECE</th> </tr> <tr> <th>David</th> <th>544</th> <th>MECH</th> </tr> <tr> <th>Sushma</th> <th>765</th> <th>CIVIL</th> </tr> </table> 

Výstup

Vysvětlení:

1. Blok těla výše uvedeného kódu obsahuje značky tabulky pro informace o studentech.
2. Existuje několik řad značekuvnitř značky stolua značka prvního řádku má záhlaví, jako je číslo studenta, jméno a známky. Data studenta jsou obsažena ve zbývajících značkách řádku.
3. Pro stylování značky řádkuuvnitř značky stolu, použili jsme interní nebo vložené CSS uvnitř bloku hlavy. Nejsme však povinni vytvořit třídu pro značku řádku; místo toho jednoduše používáme selektor prvního potomka (p:first-child), který automaticky rozpozná prvek značky prvního řádku přímo uvnitř značky tabulky. Můžeme stylizovat značku řádku, což je první prvek. Uvnitř tabulky je několik řádků značek. Jak však vidíme, první tag se stylizuje, zatímco ostatní jsou ignorovány.

Závěr

V tomto článku jsme se dozvěděli o prvním dítěti CSS. Zde je závěr prvního dítěte v článku:

1. V CSS nám selektor prvního potomka (:first-child) umožňuje okamžitě aplikovat styl prvního prvku na druhý prvek.
2. První dítě stylizuje materiál podle toho, jak souvisí s obsahem jeho rodičů a sourozenců.
3. Pseudotřída, která je členem tříd založených na pozici a na struktuře, je prvním potomkem. Bez kontroly více sourozenců (prvků) stejného typu se první třída pokusí spárovat s prvním bezprostředním dítětem rodiče.