”-elementet, så kan vi justere stilen til det overordnede elementet ved å holde barnet. For dette formålet kan vi bruke ' :har() ”-velger.

Fra begge «

»-elementene, velg den som inneholder «

»-elementet ved å bruke « .class-name:has(barnenavn) ':

.foreldre-div : har ( h1 ) {

bakgrunnsfarge : #103e6d ;

farge : skjell ;

bredde : 150 piksler ;

høyde : 150 piksler ;

grense-radius : femti% ;

tekstjustering : senter ;

}

Her har vi brukt følgende CSS-egenskaper på det overordnede elementet:

---

---

• ' bakgrunnsfarge ' brukes til å spesifisere elementets bakgrunnsfarge.
• ' farge ' spesifiserer elementets tekstfarge.
• ' bredde ” brukes til å definere elementbredden.
• ' høyde ” angir høyden på elementet.
• ' grense-radius ”-egenskapen brukes til å angi de avrundede hjørnene på elementet.
• ' tekstjustering ” spesifiserer tekstjusteringen.

Produksjon

Hvordan velge alle underordnede elementer?

For å velge underordnet element ved hjelp av foreldrevelgeren, gå gjennom det gitte eksemplet.

Eksempel

Implementer følgende trinn for å lage en HTML-side:

• Legg til et div-element som inneholder to '

  '-tagger og en '

  ' tag ha klassen ' barn-div '.
• Barnet ' div '-elementet inneholder et '

  '-element:

< div klasse = 'foreldre-div' >

< s > Hallo < / s >

< s > verden < / s >

< div klasse = 'barn-div' >

< s > jeg er barn div < / s >

< / div >

< / div >

Vi kan velge underordnede elementer gjennom overordnet '

' klasse. Dette vil ikke bare velge sin direkte ' s '-elementer, men velger også den nestede ' s 'elementer:

.foreldre-div s {

bakgrunnsfarge : #7F167F ;

font-familie : kursiv ;

skriftstørrelse : 25 piksler ;

tekstjustering : senter ;

farge : hvit røyk ;

}

Produksjon

Hvordan velge alle Direct Children-elementer?

For å velge det direkte barnet til overordnet div, kan vi bruke ' > '-symbol. Dette vil bidra til å velge alle 'p'-elementene som er det direkte barnet til forelderen '

'. For eksempel har vi brukt følgende CSS-egenskaper:

.foreldre-div > s {

bakgrunnsfarge : #7F167F ;

font-familie : kursiv ;

skriftstørrelse : 30 piksler ;

tekstjustering : senter ;

farge : hvit røyk ;

}

« font-familie ' spesifiserer fonten til det valgte elementet og ' skriftstørrelse ' brukes til å definere størrelsen på skriften:

Produksjon

Vi har diskutert om CSS-foreldrevelgere i HTML og CSS.

Konklusjon

I CSS er ' :har() ”-velger brukes som en pseudoklasse for foreldrevelger. Den brukes spesielt til å velge overordnede elementer. For eksempel, ' .parent-div:has(h1) ' velger det overordnede elementet som har '

'elementer. For å velge det underordnede elementet til det overordnede elementet, bruk ' .foreldre-div s '. Betingelsessetningen kan også brukes til å velge alle de direkte underordnede elementene. Denne artikkelen har forklart CSS-foreldrevelgeren med eksempler.