Come colpire una classe CSS all'interno di un'altra classe CSS

Le classi svolgono un ruolo cruciale quando si discute della specifica di qualsiasi elemento in CSS o in qualsiasi altro linguaggio di programmazione. Per esprimere alcuni stili ed effetti sui componenti HTML, le classi sono generate in CSS. Dando i valori della proprietà, tutte le proprietà CSS possono essere aggiunte al corpo di classe.

Questo post indicherà il targeting di una classe CSS all'interno di un'altra classe CSS.

Come colpire la classe CSS all'interno di un'altra classe CSS?

Per colpire una classe CSS all'interno di un'altra classe CSS, in primo luogo, creare contenitori div e aggiungere attributi di classe in ciascun contenitore. Quindi, accedi a una o più classi in CSS utilizzando il loro nome/valore.

Passaggio 1: aggiungi un contenitore "div"

Inizialmente, aggiungi un elemento div con l'aiuto di "". Quindi, allocare un attributo di classe per un ulteriore utilizzo.

Passaggio 2: crea contenitori "div" nidificati

Successivamente, creare contenitori di div nidificato seguendo la stessa procedura del passaggio 1:

Sposare
Jack
Tom
Jully

Produzione

Passaggio 3: applicare lo stile sul contenitore "div" principale

Accedi al principale "div"Container con l'aiuto del nome della classe come".contenuto principale":

.contenuto principale
larghezza: 40%;
Margine: 0 Auto;
colore blu;
Bordo: 2 px blu punteggiato;
Testo-align: centro;

Qui:

• "larghezza"Specifica la dimensione della larghezza dell'elemento.
• "margine"Assegna lo spazio attorno all'elemento fuori dal bordo definito.
• "colore"Definisce il colore per il testo aggiunto nell'elemento.
• "confine"Definisce uno schema o un limite attorno all'elemento in HTML.
• "Allineamento"Definisce l'allineamento del testo dell'elemento.

Passaggio 4: stile un'altra classe

Accedi alla classe principale CSS e ad altre classi nidificate usando i loro nomi. Quindi, imposta la larghezza del contenitore specificando il valore in base alla scelta:

.contenuto principale .tavolo
larghezza: 80%;

Inoltre, accedi all'altra classe seguendo la stessa procedura di cui sopra e applica le proprietà CSS menzionate nello snippet di codice seguente:

.contenuto principale .C-Right
display: blocco inline;
Font-size: 20px;

Secondo lo snippet di codice sopra:

• "Schermo"La proprietà viene utilizzata per l'impostazione del display di un elemento.
• "dimensione del font"Specifica la dimensione del testo aggiunto nel contenitore.

Ora, accedi alle altre classi utilizzando lo stesso metodo e applica le seguenti proprietà CSS di seguito:

.contenuto principale .C-Left
larghezza: 140px;
margine-destra: 6px;
Font-size: 16px;

Per farlo, applicheremo "larghezza","margine-destra" E "dimensione del font"Per scopi di styling.

Inoltre, accedi al principale "div"Container lungo altri contenitori di div nidificato utilizzando il loro nome di classe e applica le seguenti proprietà CSS

.principale .C-Right
larghezza: auto;
Font-size: 15px;
Colore: #FFF;
margine-destra: 20px;
Font-weight: normale;

Produzione

Si tratta di prendere di mira una classe CSS all'interno di un'altra classe CSS.

Conclusione

Per colpire una classe CSS all'interno di un'altra classe CSS, prima, accedere al principale "div"Attraverso l'attributo della classe assegnata. Quindi, accedi a un altro contenitore "div" seguendo la stessa procedura. Inoltre, gli utenti possono indirizzare una classe CSS all'interno di altre classi CSS. Questo post ha dimostrato il metodo per il targeting di una classe CSS all'interno di un'altra classe CSS.