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's get started</span></p> Produktion
Förklaring:
- Två div-taggar utgör body-blocket i koden ovan.
- Det finns många stycketaggar
med olika snap-taggar inuti det första div-elementet.
- En rubriktagg och en stycketagg
med en snap-tagg ingår båda i den andra div-taggen.
- 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.
- 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
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 radtaggen
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:
- Brödblocket i koden ovan innehåller tabelltaggar för elevinformationen
.
- Det finns flera rader med taggar
inuti bordsetiketten , och taggen på första raden har rubriker som elevens rullnummer, namn och märken. Elevens data finns i de återstående radtaggarna.
- För styling av radtaggen
inuti 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:
- 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.
- Det första barnet stylar materialet utifrån hur det förhåller sig till sina föräldrars och syskons innehåll.
- 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.