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's get started</span></p> Výstup
Vysvětlení:
- Dvě značky div tvoří blok těla ve výše uvedeném kódu.
- Existuje mnoho značek odstavce
s různými přichytávacími tagy uvnitř prvního prvku div.
- Značka záhlaví a značka odstavce
s tagem snap jsou oba zahrnuty do druhého tagu div.
- 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.
- 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
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 řádku
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í:
- Blok těla výše uvedeného kódu obsahuje značky tabulky pro informace o studentech
.
- Existuje několik řad značek
uvnitř značky stolu a 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.
- Pro stylování značky řádku
uvnitř 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:
- V CSS nám selektor prvního potomka (:first-child) umožňuje okamžitě aplikovat styl prvního prvku na druhý prvek.
- První dítě stylizuje materiál podle toho, jak souvisí s obsahem jeho rodičů a sourozenců.
- 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.