” element, så kan vi justere stylingen af ​​det overordnede element ved at holde barnet. Til dette formål kan vi bruge ' :har() ” vælgeren.

Fra begge '

'-elementer skal du vælge det, der indeholder '

'-elementet ved hjælp af ' .klassenavn:har(barnenavn) ”:

.forældre-div : har ( h1 ) {

baggrundsfarve : #103e6d ;

farve : muslingeskal ;

bredde : 150 px ;

højde : 150 px ;

grænse-radius : halvtreds% ;

tekstjustering : centrum ;

}

Her har vi anvendt følgende CSS-egenskaber på det overordnede element:

---

---

• “ baggrundsfarve ' bruges til at angive elementets baggrundsfarve.
• “ farve ” angiver elementets tekstfarve.
• “ bredde ” bruges til at definere elementets bredde.
• “ højde ” angiver højden af ​​elementet.
• “ grænse-radius ” egenskab bruges til at indstille elementets afrundede hjørner.
• “ tekstjustering ” angiver tekstjusteringen.

Produktion

Hvordan vælger man alle underordnede elementer?

For at vælge det underordnede element ved hjælp af forældrevælgeren skal du gennemgå det givne eksempel.

Eksempel

Implementer følgende trin for at oprette en HTML-side:

• Tilføj et div-element, der indeholder to '

  ' tags og et '

  ' tag med klassen ' barn-div ”.
• Barnet ' div '-elementet indeholder et '

  '-element:

< div klasse = 'forældre-div' >

< s > Hej < / s >

< s > verden < / s >

< div klasse = 'barn-div' >

< s > jeg er barn div < / s >

< / div >

< / div >

Vi kan vælge underordnede elementer gennem forælderen '

' klasse. Dette vil ikke kun vælge dens direkte ' s ' elementer, men vælger også den indlejrede ' s ' elementer:

.forældre-div s {

baggrundsfarve : #7F167F ;

skrifttype-familie : kursiv ;

skriftstørrelse : 25 px ;

tekstjustering : centrum ;

farve : hvid røg ;

}

Produktion

Hvordan vælger jeg alle Direct Children Elements?

For at vælge det direkte underordnede af den overordnede div kan vi bruge ' > ” symbol. Dette vil hjælpe med at vælge alle 'p' elementer, der er det direkte underordnede af forælder '

”. For eksempel har vi anvendt følgende CSS-egenskaber:

.forældre-div > s {

baggrundsfarve : #7F167F ;

skrifttype-familie : kursiv ;

skriftstørrelse : 30 px ;

tekstjustering : centrum ;

farve : hvid røg ;

}

Det ' skrifttype-familie ' angiver skrifttypen for det valgte element og ' skriftstørrelse ' bruges til at definere størrelsen af ​​skrifttypen:

Produktion

Vi har diskuteret om CSS-forældrevælgere i HTML og CSS.

Konklusion

I CSS er ' :har() ”-vælger bruges som en forældrevælger-pseudo-klasse. Det bruges især til at vælge overordnede elementer. For eksempel, ' .parent-div:has(h1) ' vælger det overordnede element med '

' elementer. For at vælge det underordnede element til det overordnede element, skal du bruge ' .forældre-div s ”. Betingelsessætningen kan også bruges til at vælge alle de direkte underordnede elementer. Denne artikel har forklaret CSS-forældrevælgeren med eksempler.