Det första barnet, en CSS-väljare (första barnet), gör det möjligt för oss att tillämpa det första elementets stil direkt på det andra elementet. Enligt CSS Selectors Level 3-specifikationen hänvisas den till som en strukturell pseudoklass eftersom den baserar stilen på allt innehåll på hur det relaterar till dess förälder- och syskoninnehåll.

Syntax

 :first-child { //property } 

Exempel

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

Produktion

Förklaring:

1. Två div-taggar utgör body-blocket i koden ovan.
2. Det finns många stycketaggar

   med olika snap-taggar inuti det första div-elementet.

3. En rubriktagg och en stycketagg

   med en snap-tagg ingår båda i den andra div-taggen.

4. Vi har applicerat intern eller inbäddad CSS i head-blocket och formaterat snap-taggen i paragraftaggen. Vi är dock inte skyldiga att skapa en klass för snap-taggen; istället kan vi använda den första underordnade väljaren (p:first-child) för att omedelbart identifiera det första snaptaggelementet inuti den första div-taggen. Vi kan ge det initiala elementet (snap) lite stil. Det finns två snap-taggar i stycket, men som vi kan se är bara den första taggen formaterad och de andra har ignorerats.
5. Vi kan se hur det första barnet såg ut efter den första snap-taggen och stilade den i den andra div-taggen. Elementet måste vara det första elementet bland sina syskon inuti den överordnade taggen för att det första barnet ska kunna riktas mot det. annars kommer den inte att väljas.

AnvändaRad Tag

Använda radtaggen, kan vi tillämpa det första barnet av CSS. Som ett resultat, om vi tillämpar stil på radtaggen med den första underordnade väljaren, kommer bara taggen på första raden att utformas, och resten av radtaggen kommer inte att utformas. Det första barnet kommer att rikta in sig på elementet på första raden i den överordnade taggen, och resten kommer att ignoreras.

Syntax

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

Exempel

För en bättre förståelse, låt oss titta på ett exempel på den första underordnade CSS som använder radtaggeni 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> 

Produktion

Förklaring:

1. Brödblocket i koden ovan innehåller tabelltaggar för elevinformationen.
2. Det finns flera rader med taggarinuti bordsetiketten, och taggen på första raden har rubriker som elevens rullnummer, namn och märken. Elevens data finns i de återstående radtaggarna.
3. För styling av radtaggeninuti bordsetiketten, har vi tillämpat intern eller inbäddad CSS inuti huvudblocket. Vi är dock inte skyldiga att skapa en klass för radtaggen; istället använder vi helt enkelt den första underordnade väljaren (p:first-child), som automatiskt känner igen första radens taggelement precis inuti tabelltaggen. Vi kan utforma radtaggen, som är det första elementet. Det finns flera rader med taggar inuti tabellen. Men som vi kan se, blir den första taggen stylad medan resten ignoreras.

Slutsats

Vi lärde oss om CSS:s första barn i den här artikeln. Här är en slutsats av första barnet i artikeln:

1. I CSS, gör det första underordnade (:first-child) väljaren oss att omedelbart tillämpa det första elementets stil på det andra elementet.
2. Det första barnet stylar materialet utifrån hur det förhåller sig till sina föräldrars och syskons innehåll.
3. En pseudoklass som är medlem i de positionsbaserade och strukturbaserade klasserna är det första barnet. Utan att leta efter fler syskon (element) av samma typ, kommer den första klassen att försöka matcha med det första närmaste barnet till föräldern.