Ensimmäinen lapsi, CSS-valitsin (first-child), mahdollistaa ensimmäisen elementin tyylin soveltamisen suoraan toiseen elementtiin. CSS Selectors Level 3 -määrityksen mukaan sitä kutsutaan rakenteelliseksi pseudoluokkaksi, koska se perustaa minkä tahansa sisällön tyylin siihen, miten se liittyy emo- ja sisarussisältöönsä.
jos muuten jos muuten jos java
Syntaksi
:first-child { //property } Esimerkki
h1:first-child { color: blue; } <p> <span>Let's get started</span></p> Lähtö
Selitys:
- Kaksi div-tunnistetta muodostavat yllä olevan koodin body-lohkon.
- Kappaletunnisteita on monia
erilaisilla snap-tageilla ensimmäisen div-elementin sisällä.
- Otsikkotunniste ja kappaletunniste
snap-tunnisteen kanssa sisältyvät molemmat toiseen div-tunnisteeseen.
- Olemme lisänneet sisäistä tai upotettua CSS:ää head-lohkoon ja tyylistäneet snap-tunnisteen kappaletunnisteen sisällä. Meidän ei kuitenkaan tarvitse luoda luokkaa snap-tunnisteelle; sen sijaan voimme käyttää ensimmäistä lapsivalitsinta (p:first-child) tunnistamaan välittömästi ensimmäisen snap tag -elementin ensimmäisen div-tunnisteen sisällä. Voimme antaa alkuelementille (snap) tyyliä. Kappaleessa on kaksi snap-tunnistetta, mutta kuten näemme, vain ensimmäinen tagi on tyylitelty, ja muut on jätetty huomiotta.
- Näemme, kuinka ensimmäinen lapsi etsi ensimmäistä snap-tunnistetta ja muotoili sen toisessa div-tunnisteessa. Elementin on oltava ensimmäinen elementti sisaruksistaan ylätunnisteen sisällä, jotta ensimmäinen alatason kohde kohdistaa siihen. muuten sitä ei valita.
KäyttämälläRivitunniste
Rivitunnisteen käyttäminen
Syntaksi
tr:first-child{ //CSS declarations with style properties; } Esimerkki
Tarkastellaanpa esimerkkiä ensimmäisestä ali-CSS:stä, jossa käytetään rivitunnistetta
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> Lähtö
Selitys:
- Yllä olevan koodin runko-osa sisältää taulukkotunnisteet opiskelijatiedoille
.
- Tunnisteita on useita rivejä
taulukon tunnisteen sisällä , ja ensimmäisen rivin tagissa on otsikot, kuten opiskelijan rullan numero, nimi ja merkit. Opiskelijan tiedot sisältyvät jäljellä oleviin rivitunnisteisiin.
- Rivitunnisteen muotoiluun
taulukon tunnisteen sisällä , olemme käyttäneet sisäistä tai upotettua CSS:ää päälohkon sisällä. Meidän ei kuitenkaan tarvitse luoda luokkaa rivitunnisteelle; sen sijaan käytämme yksinkertaisesti ensimmäistä lapsivalitsinta (p:first-child), joka tunnistaa automaattisesti ensimmäisen rivin tunnisteelementin suoraan taulukkotunnisteen sisällä. Voimme muotoilla rivitunnisteen, joka on ensimmäinen elementti. Taulukon sisällä on useita rivejä tunnisteita. Kuten näemme, ensimmäinen tunniste kuitenkin muotoillaan, kun taas muut jätetään huomioimatta.
Johtopäätös
Opimme CSS:n ensimmäisestä lapsesta tässä artikkelissa. Tässä on artikkelin ensimmäisen lapsen johtopäätös:
- CSS:ssä ensimmäisen alatason (:first-child) -valitsimella voimme välittömästi soveltaa ensimmäisen elementin tyyliä toiseen elementtiin.
- Ensimmäinen lapsi muotoilee materiaalia sen mukaan, miten se liittyy vanhempiensa ja sisarustensa sisältöön.
- Pseudoluokka, joka kuuluu asemaperusteisiin ja rakenneperusteisiin luokkiin, on ensimmäinen lapsi. Tarkistamatta useampia samantyyppisiä sisaruksia (elementtejä), ensimmäinen luokka yrittää sopia vanhemman ensimmäisen välittömän lapsen kanssa.