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's get started</span></p> Išvestis
Paaiškinimas:
- Dvi „div“ žymos sudaro korpuso bloką aukščiau esančiame kode.
- Yra daug pastraipų žymų
su įvairiomis snap žymomis pirmame div elemente.
- Antraštės ir pastraipos žyma
su „snap“ žyma yra įtrauktos į kitą „div“ žymą.
- 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.
- 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ą
Sintaksė
tr:first-child{ //CSS declarations with style properties; } Pavyzdys
Norėdami geriau suprasti, pažvelkime į pirmojo antrinio CSS, naudojant eilutės žymą, pavyzdį
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:
- Aukščiau esančio kodo korpuso bloke yra mokinio informacijos lentelės žymos
.
- Yra kelios etikečių eilutės
lentelė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.
- Eilutės žymos stiliui formuoti
lentelė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:
- CSS pirmasis antrinis (:first-child) parinkiklis leidžia iš karto pritaikyti pirmojo elemento stilių kitam elementui.
- Pirmas vaikas formuoja medžiagą pagal tai, kaip ji yra susijusi su tėvų ir brolių ir seserų turiniu.
- 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.