Prvý potomok, selektor CSS (prvé dieťa), nám umožňuje aplikovať štýl prvého prvku priamo na druhý prvok. Podľa špecifikácie CSS Selectors Level 3 sa označuje ako štrukturálna pseudotrieda, pretože zakladá štýl akéhokoľvek obsahu na tom, ako súvisí s nadradeným a súrodeneckým obsahom.

Syntax

 :first-child { //property }  

Príklad

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

Výkon

Vysvetlenie:

1. Dve značky div tvoria blok tela v kóde vyššie.
2. Existuje veľa značiek odsekov

   s rôznymi prichytávacími značkami vo vnútri prvého prvku div.

3. Značka hlavičky a značka odseku

   s tagom snap sú obidva zahrnuté v druhom tagu div.

4. Použili sme interné alebo vložené CSS vo vnútri bloku hlavy a štylizovali sme značku snap v rámci značky odseku. Nie sme však povinní vytvoriť triedu pre značku snap; namiesto toho môžeme použiť selektor prvého potomka (p:first-child) na okamžitú identifikáciu prvého prvku značky snap v rámci prvej značky div. Počiatočnému prvku (snap) môžeme dať nejaký štýl. V rámci odseku sú dve značky prichytenia, ale ako vidíme, iba prvá značka je štylizovaná a ostatné boli ignorované.
5. Môžeme vidieť, ako prvé dieťa hľadalo prvý snap tag a štylizovalo ho do druhého tagu div. Prvok musí byť prvým prvkom medzi svojimi súrodencami v nadradenej značke, na ktorý sa zameria prvý potomok; v opačnom prípade nebude zvolený.

Pomocou Značka riadku

Použitie značky riadku , môžeme použiť prvého potomka CSS. Výsledkom je, že ak použijeme štýl na značku riadka pomocou prvého podradeného selektora, bude mať štýl iba značka prvého riadka a zvyšok značky riadka nebude upravený. Prvý potomok bude zacielený na prvok prvého riadka v rámci rodičovskej značky a zvyšok bude ignorovaný.

Syntax

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

Príklad

Pre lepšie pochopenie sa pozrime na príklad prvého podriadeného CSS pomocou značky riadku v 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ýkon

Vysvetlenie:

1. Blok tela vyššie uvedeného kódu obsahuje značky tabuľky pre informácie o študentovi .
2. Existuje niekoľko riadkov značiek vnútri značky tabuľky a značka v prvom riadku má hlavičky, ako napríklad poradové číslo študenta, meno a známky. Údaje študenta sú obsiahnuté v zostávajúcich značkách riadkov.
3. Na úpravu značky riadku vnútri značky tabuľky , použili sme interné alebo vložené CSS vo vnútri bloku hlavy. Nie sme však povinní vytvoriť triedu pre značku riadku; namiesto toho jednoducho používame selektor prvého potomka (p:first-child), ktorý automaticky rozpozná prvok značky prvého riadka priamo v značke tabuľky. Môžeme upraviť značku riadku, ktorá je prvým prvkom. V tabuľke je niekoľko riadkov značiek. Ako však vidíme, prvá značka sa upraví, zatiaľ čo ostatné sa ignorujú.

Záver

V tomto článku sme sa dozvedeli o prvom dieťati CSS. Tu je záver prvého dieťaťa v článku:

1. V CSS nám selektor prvého potomka (:first-child) umožňuje okamžite aplikovať štýl prvého prvku na druhý prvok.
2. Prvorodený štylizuje materiál podľa toho, ako súvisí s obsahom jeho rodičov a súrodencov.
3. Pseudotrieda, ktorá je členom tried založených na pozícii a na štruktúre, je prvým potomkom. Bez kontroly viacerých súrodencov (prvkov) rovnakého typu sa prvá trieda pokúsi zhodovať s prvým bezprostredným dieťaťom rodiča.