” element, siis saame lapse käes hoides reguleerida vanemaelemendi stiili. Sel eesmärgil saame kasutada ' :has() ” valija.

Valige mõlemast elemendist '

' see, mis sisaldab elementi '

', kasutades ' .class-name:has(lapsenimi) ”:

.parent-div : on ( h1 ) {

taustavärv : #103e6d ;

värvi : merekarp ;

laius : 150 pikslit ;

kõrgus : 150 pikslit ;

piiri raadius : viiskümmend% ;

teksti joondamine : Keskus ;

}

Siin oleme emaelemendile rakendanud järgmised CSS-i atribuudid:

---

---

• “ taustavärv ” kasutatakse elemendi taustavärvi määramiseks.
• “ värvi ” määrab elemendi teksti värvi.
• “ laius ” kasutatakse elemendi laiuse määratlemiseks.
• “ kõrgus ” määrab elemendi kõrguse.
• “ piiri raadius ” atribuuti kasutatakse elemendi ümarate nurkade määramiseks.
• “ teksti joondamine ” määrab teksti joonduse.

Väljund

Kuidas valida kõiki alamelemente?

Alamelemendi valimiseks vanemvalija abil läbige antud näide.

Näide

HTML-lehe loomiseks rakendage järgmisi samme.

• Lisage element div, mis sisaldab kahte '

  ' sildid ja '

  ' silt millel on klass ' laps-div ”.
• Laps ' div ” element sisaldab elementi „

  ”:

< div klass = 'vanem-div' >

< lk > Tere < / lk >

< lk > maailmas < / lk >

< div klass = 'laps-div' >

< lk > ma olen lapsdiv < / lk >

< / div >

< / div >

Saame valida alamelemente vanema kaudu '

” klass. See mitte ainult ei vali selle otsest lk ' elemente, vaid valib ka pesastatud ' lk ” elemendid:

.parent-div lk {

taustavärv : #7F167F ;

font-perekond : kursiiv ;

fondi suurus : 25 pikslit ;

teksti joondamine : Keskus ;

värvi : valge suits ;

}

Väljund

Kuidas valida kõiki otseseid lasteelemente?

Vanemdivisjoni otsese alam valimiseks saame kasutada ' > ” sümbol. See aitab valida kõik 'p' elemendid, mis on vanema otsesed alamelemendid.

”. Näiteks oleme rakendanud järgmisi CSS-i atribuute:

.parent-div > lk {

taustavärv : #7F167F ;

font-perekond : kursiiv ;

fondi suurus : 30 pikslit ;

teksti joondamine : Keskus ;

värvi : valge suits ;

}

' font-perekond ' määrab valitud elemendi fondi ja ' fondi suurus ” kasutatakse fondi suuruse määramiseks:

Väljund

Oleme arutanud CSS-i vanemavalijaid HTML-is ja CSS-is.

Järeldus

CSS-is on ' :has() ” valijat kasutatakse vanemvalija pseudoklassina. Seda kasutatakse eriti vanemate elementide valimiseks. Näiteks, ' .parent-div:has(h1) ' valib põhielemendi, millel on '

” elemente. Ülemelemendi alamelemendi valimiseks kasutage ' .parent-div lk ”. Tingimuslauset saab kasutada ka kõigi otseste alamelementide valimiseks. Selles artiklis on näidetega selgitatud CSS-i vanemvalijat.