So zielen Sie auf eine CSS-Klasse innerhalb einer anderen CSS-Klasse ab

“. Weisen Sie dann ein Klassenattribut zur weiteren Verwendung zu.

Schritt 2: Erstellen Sie verschachtelte „div“-Container

Erstellen Sie als Nächstes verschachtelte div-Container, indem Sie dem gleichen Verfahren wie in Schritt 1 folgen:

< div Klasse = 'Hauptinhalt' >

< div Klasse = 'Tisch' >

< div Klasse = 'Reihe' >

< div Klasse = 'gespalten' > Heiraten < / div >

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

< div Klasse = 'gespalten' > Tom < / div >

< div Klasse = 'c-rechts' > Juli < / div >

< / div >

< / div >

< / div >

Ausgang

---

---

Schritt 3: Wenden Sie das Styling auf den Hauptcontainer „div“ an

Greifen Sie auf die wichtigsten „ div ” Container mit Hilfe des Klassennamens als “ .Hauptinhalt “:

.Hauptinhalt {

Breite : 40% ;

Rand : 0 Auto ;

Farbe : Blau ;

Grenze : 2px gepunktet Blau ;

Textausrichtung : Center ;

}

Hier:

• „ Breite “ gibt die Breitengröße des Elements an.
• „ Rand ” ordnet Raum um das Element herum außerhalb des definierten Rahmens zu.
• „ Farbe “ definiert die Farbe für den hinzugefügten Text im Element.
• „ Grenze ” definiert einen Umriss oder eine Begrenzung um das Element in HTML.
• „ Textausrichtung “ definiert die Ausrichtung des Textes des Elements.

Schritt 4: Gestalten Sie eine andere Klasse

Greifen Sie auf die CSS-Hauptklasse und andere verschachtelte Klassen zu, indem Sie ihre Namen verwenden. Stellen Sie dann die Breite des Containers ein, indem Sie den Wert nach Ihrer Wahl angeben:

.Hauptinhalt .Tisch {

Breite : 80% ;

}

Greifen Sie außerdem auf die andere Klasse zu, indem Sie das gleiche Verfahren wie oben befolgen, und wenden Sie die CSS-Eigenschaften an, die im folgenden Codeausschnitt erwähnt werden:

.Hauptinhalt .c-rechts {

Anzeige : Inline-Block ;

Schriftgröße : 20px ;

}

Gemäß dem obigen Code-Snippet:

• „ Anzeige ”-Eigenschaft wird verwendet, um die Anzeige eines Elements festzulegen.
• „ Schriftgröße ” gibt die Größe des im Container hinzugefügten Textes an.

Greifen Sie nun auf die anderen Klassen zu, indem Sie dieselbe Methode verwenden, und wenden Sie die folgenden CSS-Eigenschaften wie unten erwähnt an:

.Hauptinhalt .gespalten {

Breite : 140px ;

Rand rechts : 6px ;

Schriftgröße : 16px ;

}

Dafür werden wir uns bewerben“ Breite “, „ Rand rechts ' Und ' Schriftgröße “ für Stylingzwecke.

Greifen Sie außerdem auf die wichtigsten „ div ”-Container zusammen mit anderen verschachtelten div-Containern, indem Sie deren Klassennamen verwenden und die folgenden CSS-Eigenschaften anwenden

.hauptsächlich .c-rechts {

Breite : Auto ;

Schriftgröße : 15px ;

Farbe : #F f f ;

Rand rechts : 20px ;

Schriftstärke : normal ;

}

Ausgang

Das ist alles über das Targeting einer CSS-Klasse innerhalb einer anderen CSS-Klasse.

Abschluss

Um auf eine CSS-Klasse innerhalb einer anderen CSS-Klasse abzuzielen, greifen Sie zunächst auf die Haupt- „ div ” durch das zugewiesene Klassenattribut. Greifen Sie dann auf einen anderen „div“-Container zu, indem Sie demselben Verfahren folgen. Darüber hinaus können Benutzer eine CSS-Klasse innerhalb einer anderen CSS-Klasse anvisieren. Dieser Beitrag hat die Methode zum Targeting einer CSS-Klasse innerhalb einer anderen CSS-Klasse demonstriert.