logo

TechCodeview

CSS First Child

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

CSS First Child

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.

    zoznam náboženstiev
  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ý.

PomocouZnač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

polymorfizmus v jave

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

CSS First Child

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čiekvnútri značky tabuľkya 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 riadkuvnú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.