”-element, dan kunnen we de styling van het bovenliggende element aanpassen door het kind vast te houden. Hiervoor kunnen we gebruik maken van de “ :heeft() 'kiezer.

Selecteer uit beide '

'-elementen degene die het '

'-element bevat met behulp van ' .class-name:has(kind-naam) ”:

.ouder-div : heeft ( h1 ) {

Achtergrond kleur : #103e6d ;

kleur : zeeschelp ;

breedte : 150px ;

hoogte : 150px ;

grensradius : vijftig% ;

tekst uitlijnen : centrum ;

}

Hier hebben we de volgende CSS-eigenschappen toegepast op het bovenliggende element:

---

---

• “ Achtergrond kleur ” wordt gebruikt om de achtergrondkleur van het element te specificeren.
• “ kleur ” specificeert de tekstkleur van het element.
• “ breedte ” wordt gebruikt om de elementbreedte te definiëren.
• “ hoogte ” specificeert de hoogte van het element.
• “ grensradius ” eigenschap wordt gebruikt om de afgeronde hoeken van het element in te stellen.
• “ tekst uitlijnen ” specificeert de tekstuitlijning.

Uitgang

Hoe selecteer ik alle onderliggende elementen?

Om het onderliggende element te selecteren met behulp van de bovenliggende selector, doorloopt u het gegeven voorbeeld.

Voorbeeld

Voer de volgende stappen uit om een ​​HTML-pagina te maken:

• Voeg een div-element toe dat twee '

  'tags en een'

  ' tag met de klasse ' kind-div ”.
• Het kind ' div ”-element bevat een “

  ”-element:

< div klas = 'ouder-div' >

< p > Hallo < / p >

< p > wereld- < / p >

< div klas = 'kind-div' >

< p > ik ben kind div < / p >

< / div >

< / div >

We kunnen onderliggende elementen selecteren via de ouder '

' klas. Dit selecteert niet alleen zijn directe “ p ” elementen maar selecteert ook de geneste “ p ” elementen:

.ouder-div p {

Achtergrond kleur : #7F167F ;

font-familie : cursief ;

lettertypegrootte : 25px ;

tekst uitlijnen : centrum ;

kleur : witte rook ;

}

Uitgang

Hoe selecteer ik alle Direct Children-elementen?

Om het directe kind van de bovenliggende div te selecteren, kunnen we de ' > ” symbool. Dit zal helpen om alle 'p' -elementen te selecteren die het directe kind zijn van ouder '

”. Zo hebben we de volgende CSS-eigenschappen toegepast:

.ouder-div > p {

Achtergrond kleur : #7F167F ;

font-familie : cursief ;

lettertypegrootte : 30px ;

tekst uitlijnen : centrum ;

kleur : witte rook ;

}

De ' font-familie ” specificeert het lettertype van het geselecteerde element en “ lettertypegrootte ” wordt gebruikt om de grootte van het lettertype te definiëren:

Uitgang

We hebben gesproken over CSS-ouderkiezers in HTML en CSS.

Gevolgtrekking

In CSS is de ' :heeft() ”selector wordt gebruikt als een pseudo-klasse van de bovenliggende selector. Het wordt met name gebruikt om bovenliggende elementen te selecteren. Bijvoorbeeld, ' .parent-div:heeft(h1) ” selecteert het bovenliggende element met de “

” elementen. Om het onderliggende element van het bovenliggende element te selecteren, gebruikt u ' .parent-div p ”. De voorwaarde-instructie kan ook worden gebruikt om alle directe onderliggende elementen te selecteren. Dit artikel heeft de CSS-ouderkiezer uitgelegd met voorbeelden.