Pirmasis vaikas, CSS parinkiklis (pirmasis vaikas), leidžia mums tiesiogiai pritaikyti pirmojo elemento stilių kitam elementui. Pagal CSS Selectors Level 3 specifikaciją, ji vadinama struktūrine pseudo klase, nes bet kokio turinio stilius grindžiamas tuo, kaip jis susijęs su pirminiu ir brolio turiniu.

Sintaksė

 :first-child { //property } 

Pavyzdys

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

Išvestis

Paaiškinimas:

1. Dvi „div“ žymos sudaro korpuso bloką aukščiau esančiame kode.
2. Yra daug pastraipų žymų

   su įvairiomis snap žymomis pirmame div elemente.

3. Antraštės ir pastraipos žyma

   su „snap“ žyma yra įtrauktos į kitą „div“ žymą.

4. Pritaikėme vidinį arba įterptą CSS antraštės bloko viduje, o pastraipos žymoje sukūrėme priskyrimo žymą. Tačiau mes neprivalome sukurti snap žymos klasės; vietoj to galime naudoti pirmąjį antrinį parinkiklį (p:first-child), kad akimirksniu atpažintume pirmąjį snap žymos elementą pirmojoje div žymoje. Pradiniam elementui (snap) galime suteikti tam tikrą stilių. Pastraipoje yra dvi pritraukimo žymos, bet, kaip matome, tik pirmoji žyma yra stilizuota, o kitos buvo ignoruojamos.
5. Matome, kaip pirmasis vaikas ieškojo pirmosios „snap“ žymos ir sukūrė jos stilių antroje „div“ žymoje. Elementas turi būti pirmasis elementas tarp jo brolių ir seserų pagrindinėje žymoje, kuriam bus taikomas pirmasis antrinis elementas; kitu atveju jis nebus pasirinktas.

NaudojantEilutės žyma

Naudojant eilutės žymą, galime pritaikyti pirmąjį CSS antrinį elementą. Todėl, jei eilutės žymai pritaikysime stilių naudodami pirmąjį antrinį parinkiklį, bus sukurtas tik pirmosios eilutės žymos stilius, o likusios eilutės žymos stilius nebus. Pirmasis antrinis elementas bus taikomas pirminės žymos pirmosios eilutės elementui, o likusių bus nepaisoma.

Sintaksė

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

Pavyzdys

Norėdami geriau suprasti, pažvelkime į pirmojo antrinio CSS, naudojant eilutės žymą, pavyzdį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> 

Išvestis

Paaiškinimas:

1. Aukščiau esančio kodo korpuso bloke yra mokinio informacijos lentelės žymos.
2. Yra kelios etikečių eilutėslentelės žymos viduje, o pirmosios eilutės žymoje yra antraštės, pvz., mokinio sąrašo numeris, vardas ir ženklai. Mokinio duomenys yra likusiose eilučių žymose.
3. Eilutės žymos stiliui formuotilentelės žymos viduje, pritaikėme vidinį arba įterptą CSS galvos bloko viduje. Tačiau mes neprivalome sukurti eilutės žymos klasės; vietoj to mes tiesiog naudojame pirmąjį antrinį parinkiklį (p:first-child), kuris automatiškai atpažins pirmosios eilutės žymos elementą tiesiai lentelės žymoje. Galime sukurti eilutės žymos stilių, kuris yra pirmasis elementas. Lentelės viduje yra kelios žymų eilės. Tačiau, kaip matome, pirmoji žyma formuojama, o likusios nepaisomos.

Išvada

Šiame straipsnyje sužinojome apie pirmąjį CSS vaiką. Štai straipsnio pirmojo vaiko išvada:

1. CSS pirmasis antrinis (:first-child) parinkiklis leidžia iš karto pritaikyti pirmojo elemento stilių kitam elementui.
2. Pirmas vaikas formuoja medžiagą pagal tai, kaip ji yra susijusi su tėvų ir brolių ir seserų turiniu.
3. Pseudoklasė, kuri yra pozicijų ir struktūra pagrįstų klasių narė, yra pirmasis vaikas. Netikrindama, ar yra daugiau to paties tipo brolių ir seserų (elementų), pirmoji klasė bandys sutapti su pirmuoju tiesioginiu vieno iš tėvų vaiku.