Det første barnet, en CSS-velger (førstebarn), gjør det mulig for oss å bruke det første elementets stil direkte på det andre elementet. I følge CSS Selectors Level 3-spesifikasjonen, blir den referert til som en strukturell pseudoklasse siden den baserer stilen til ethvert innhold på hvordan det forholder seg til foreldre- og søskeninnholdet.

java konverter heltall til streng

Syntaks

 :first-child { //property } 

Eksempel

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

Produksjon

Forklaring:

1. To div-tagger utgjør body-blokken i koden ovenfor.
2. Det er mange avsnittskoder

   med ulike snap-tagger inne i det første div-elementet.

3. En overskriftskode og en avsnittskode

   med en snap-tag er begge inkludert i den andre div-taggen.

4. Vi har brukt intern eller innebygd CSS inne i head-blokken og stylet snap-taggen i avsnittskoden. Vi er imidlertid ikke pålagt å opprette en klasse for snap-taggen; i stedet kan vi bruke den første underordnede velgeren (p:first-child) til å umiddelbart identifisere det første snap-tag-elementet inne i den første div-taggen. Vi kan gi det innledende elementet (snap) litt stil. Det er to snap-tags i avsnittet, men som vi kan se, er bare den første taggen stilt, og de andre har blitt ignorert.
5. Vi kan se hvordan det første barnet så ut etter den første snap-taggen og stylet den i den andre div-taggen. Elementet må være det første elementet blant søsken inne i den overordnede taggen for å bli målrettet av det første barnet; ellers vil den ikke bli valgt.

BrukerRow Tag

Bruke rad-taggen, kan vi bruke det første barnet til CSS. Som et resultat, hvis vi bruker stil på rad-taggen ved å bruke den første underordnede velgeren, vil bare den første rad-taggen bli stylet, og resten av rad-taggen vil ikke bli stylet. Det første barnet vil målrette mot elementet i første rad i den overordnede taggen, og resten vil bli ignorert.

json filen

Syntaks

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

Eksempel

For en bedre forståelse, la oss se på et eksempel på den første underordnede CSS-en som bruker rad-taggeni 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> 

Produksjon

hvordan du viser applikasjonen på Android

Forklaring:

1. Brødtekstblokken til koden ovenfor inneholder tabellkoder for elevinformasjonen.
2. Det er flere rader med taggerinne i bordmerket, og taggen på første rad har overskrifter som elevens rullenummer, navn og merker. Elevens data finnes i de resterende radtaggene.
3. For styling av radmerketinne i bordmerket, har vi brukt intern eller innebygd CSS inne i hodeblokken. Vi er imidlertid ikke pålagt å opprette en klasse for rad-taggen; i stedet bruker vi ganske enkelt den første underordnede velgeren (p:first-child), som automatisk gjenkjenner tagelementet i første rad rett inne i tabellkoden. Vi kan style radkoden, som er det første elementet. Det er flere rader med tagger inne i tabellen. Men som vi kan se, blir den første taggen stylet mens resten blir ignorert.

Konklusjon

Vi lærte om CSS sitt første barn i denne artikkelen. Her er en konklusjon av første barn i artikkelen:

1. I CSS lar den første underordnede (:first-child) velgeren oss umiddelbart bruke det første elementets stil på det andre elementet.
2. Førstebarnet stiler materialet ut fra hvordan det forholder seg til foreldrenes og søskens innhold.
3. En pseudoklasse som er medlem av de posisjonsbaserte og strukturbaserte klassene er det første barnet. Uten å se etter flere søsken (elementer) av samme type, vil den første klassen prøve å matche med det første nærmeste barnet til forelderen.