”-elementtiä, voimme säätää yläelementin tyyliä pitämällä lapsesta kiinni. Tätä tarkoitusta varten voimme käyttää ' :has() ” valitsin.

Valitse molemmista '

'-elementeistä se, joka sisältää '

'-elementin käyttämällä ' .class-name:has(lapsen-nimi) ':

.parent-div : on ( h1 ) {

taustaväri : #103e6d ;

väri- : kotilo ;

leveys : 150 pikseliä ;

korkeus : 150 pikseliä ;

raja-säde : viisikymmentä% ;

tekstin tasaus : keskusta ;

}

Tässä olemme käyttäneet seuraavat CSS-ominaisuudet pääelementissä:

---

---

• ' taustaväri ' käytetään määrittämään elementin taustaväri.
• ' väri- ” määrittää elementin tekstin värin.
• ' leveys ” käytetään elementin leveyden määrittämiseen.
• ' korkeus ” määrittää elementin korkeuden.
• ' raja-säde ” -ominaisuudella asetetaan elementin pyöristetyt kulmat.
• ' tekstin tasaus ” määrittää tekstin tasauksen.

Lähtö

Kuinka valita kaikki lapsielementit?

Jos haluat valita lapsielementin ylävalitsimen avulla, käy läpi annettu esimerkki.

Esimerkki

Luo HTML-sivu toteuttamalla seuraavat vaiheet:

• Lisää div-elementti, joka sisältää kaksi '

  '-tunnisteet ja '

  'tunniste jolla on luokka' lapsi-div ”.
• Lapsi ' div '-elementti sisältää '

  '-elementin:

< div luokkaa = 'vanhempi-div' >

< s > Hei < / s >

< s > maailman- < / s >

< div luokkaa = 'lapsi-div' >

< s > olen lapsidiv < / s >

< / div >

< / div >

Voimme valita lapsielementtejä vanhemman kautta '

”luokka. Tämä ei vain valitse sen suoraa ' s '-elementtejä, mutta valitsee myös sisäkkäisen ' s ”elementit:

.parent-div s {

taustaväri : #7F167F ;

font-perhe : kursiivinen ;

Fonttikoko : 25px ;

tekstin tasaus : keskusta ;

väri- : valkoinen savu ;

}

Lähtö

Kuinka valita kaikki suorat lapsielementit?

Voit valita ylätason div:n suoran alatason käyttämällä ' > ”symboli. Tämä auttaa valitsemaan kaikki 'p'-elementit, jotka ovat vanhemman välittömät ali

”. Olemme esimerkiksi käyttäneet seuraavia CSS-ominaisuuksia:

.parent-div > s {

taustaväri : #7F167F ;

font-perhe : kursiivinen ;

Fonttikoko : 30 kuvapistettä ;

tekstin tasaus : keskusta ;

väri- : valkoinen savu ;

}

' font-perhe ' määrittää valitun elementin fontin ja ' Fonttikoko ' käytetään määrittämään fontin koko:

Lähtö

Olemme keskustelleet CSS-ylävalitsimista HTML:ssä ja CSS:ssä.

Johtopäätös

CSS:ssä ' :has() ” -valitsinta käytetään päävalitsimen pseudoluokkana. Sitä käytetään erityisesti pääelementtien valitsemiseen. Esimerkiksi, ' .parent-div:has(h1) ' valitsee pääelementin, jolla on '

”elementtejä. Jos haluat valita yläelementin alielementin, käytä ' .parent-div s ”. Ehtolauseketta voidaan käyttää myös kaikkien suorien alielementtien valitsemiseen. Tässä artikkelissa on selitetty CSS-ylävalitsinta esimerkein.