Een CSS-klasse targeten binnen een andere CSS-klasse

”. Wijs vervolgens een klasseattribuut toe voor verder gebruik.

Stap 2: Maak geneste 'div' -containers

Maak vervolgens geneste div-containers door dezelfde procedure van stap 1 te volgen:

< div klas = 'belangrijkste inhoud' >

< div klas = 'tafel' >

< div klas = 'rij' >

< div klas = 'c-links' > Trouwen < / div >

< div klas = 'c-rechts' > Jack < / div >

< div klas = 'c-links' > Tom < / div >

< div klas = 'c-rechts' > juli < / div >

< / div >

< / div >

< / div >

Uitgang

---

---

Stap 3: Styling toepassen op de hoofdcontainer 'div'.

Toegang tot het hoofdmenu ' div ” container met behulp van klassenaam als “ .belangrijkste inhoud ”:

.belangrijkste inhoud {

breedte : 40% ;

marge : 0 auto ;

kleur : blauw ;

grens : 2px gestippeld blauw ;

tekst uitlijnen : centrum ;

}

Hier:

• “ breedte ” specificeert de breedtemaat van het element.
• “ marge ” wijst ruimte toe rond het element buiten de gedefinieerde rand.
• “ kleur ” definieert de kleur voor de toegevoegde tekst in het element.
• “ grens ” definieert een omtrek of grens rond het element in HTML.
• “ Tekst uitlijnen ” definieert de uitlijning van de tekst van het element.

Stap 4: Style nog een les

Toegang tot de CSS-hoofdklasse en andere geneste klassen door hun namen te gebruiken. Stel vervolgens de breedte van de container in door de waarde op te geven volgens uw keuze:

.belangrijkste inhoud .tafel {

breedte : 80% ;

}

Ga bovendien naar de andere klasse door dezelfde procedure als hierboven te volgen en pas de CSS-eigenschappen toe die in het onderstaande codefragment worden vermeld:

.belangrijkste inhoud .c-rechts {

weergave : inline-blok ;

lettertypegrootte : 20px ;

}

Volgens het bovenstaande codefragment:

• “ weergave ” eigenschap wordt gebruikt voor het instellen van de weergave van een element.
• “ lettertypegrootte ” specificeert de grootte van de tekst die in de container wordt toegevoegd.

Ga nu naar de andere klassen door dezelfde methode te gebruiken en pas de volgende CSS-eigenschappen toe, zoals hieronder vermeld:

.belangrijkste inhoud .c-links {

breedte : 140px ;

marge-rechts : 6px ;

lettertypegrootte : 16px ;

}

Hiervoor passen we “ breedte ”, “ marge-rechts ' En ' lettertypegrootte ”voor stylingdoeleinden.

Bovendien, toegang tot de belangrijkste “ div ” container samen met andere geneste div-containers door hun klassenaam te gebruiken en de volgende CSS-eigenschappen toe te passen

.voornaamst .c-rechts {

breedte : auto ;

lettertypegrootte : 15px ;

kleur : #fff ;

marge-rechts : 20px ;

lettertype dikte : normaal ;

}

Uitgang

Dat gaat allemaal over het targeten van een CSS-klasse binnen een andere CSS-klasse.

Conclusie

Om een ​​CSS-klasse binnen een andere CSS-klasse te targeten, gaat u eerst naar het hoofdmenu ' div ” via het toegewezen klasseattribuut. Ga vervolgens naar een andere 'div' -container door dezelfde procedure te volgen. Bovendien kunnen gebruikers een CSS-klasse binnen een andere CSS-klasse targeten. Dit bericht heeft de methode gedemonstreerd voor het targeten van een CSS-klasse binnen een andere CSS-klasse.