Seleziona tutti gli elementi dei bambini in modo ricorsivo in CSS

Seleziona tutti gli elementi dei bambini in modo ricorsivo in CSS

Il metodo comunemente usato per selezionare gli elementi HTML in CSS è aggiungere l'ID o il selettore di classe dell'elemento particolare e quindi applicare le proprietà CSS nell'elemento. Ma, se è necessario selezionare diversi tipi di elementi figlio associati a un elemento genitore singolo. Ad esempio, un elemento di span, un elemento di paragrafo o un elemento di intestazione come figlio di un singolo elemento div, il “*"Il simbolo seguito dal selettore viene utilizzato nell'elemento in stile CSS.

Questo articolo dimostrerà praticamente il metodo per selezionare tutti gli elementi figlio.

Come selezionare tutti gli elementi del bambino in modo ricorsivo?

Per selezionare gli elementi figlio, lo sviluppatore deve aggiungere il selettore ID o classe dell'elemento genitore con "*"Simbolo alla fine nell'elemento in stile CSS e quindi aggiungere le proprietà al suo interno.

Esempio

Aggiungiamo un semplice esempio per capire la spiegazione sopra:


Paragrafo 1


> Paragrafo n. 2

Paragrafo n. 3


> Paragrafo n. 4



> Paragrafo n. 5


> Paragrafo n. 6


> Paragrafo n. 7


Nel frammento di codice aggiunto sopra:

    • UN ""L'elemento viene aggiunto con una classe dichiarata come"la mia classe".
    • Dentro il ""Elemento, quattro sotto-elementi sono definiti usando"

      ","","

      ", E ""Tag con il testo"Paragrafo 1","Paragrafo n. 2","Paragrafo n. 3", E "Paragrafo n. 4"Rispettivamente.

    • Dopo la chiusura "Tag, tre ""Vengono aggiunti elementi che non sono associati a quanto sopra""Elemento. Vengono aggiunti solo per differenziare quelli che sono gli elementi figlio associati al Parent Div e quelli che sono elementi indipendenti.

Ora, per selezionare tutti gli elementi figlio del Div, il "*"Il simbolo con il nome dell'ID genitore o della classe può essere utilizzato:

.la mia classe *
Background-color: Powderblue;
blocco di visualizzazione;
Testo-align: centro;


Nel frammento di codice sopra:

    • IL "*"Il simbolo viene aggiunto seguito da".la mia classe"Selettore che è l'elemento genitore contenente quattro diversi elementi al suo interno come elementi figlio.
    • Al suo interno, il "colore di sfondo"La proprietà è stata definita come"polvere". Questa proprietà aggiunge il colore di sfondo agli elementi figlio.
    • "blocco di visualizzazione" E "allineamento del testo: centro"Le proprietà sono state definite per allineare gli elementi figlio al centro dell'interfaccia.

L'esempio sopra aggiunto applicherà le proprietà CSS agli elementi figlio dell'elemento genitore associato alla classe "la mia classe". Queste proprietà non saranno applicate ad altri elementi che non sono gli elementi figlio della Div associati alla classe "Myclass":


Si tratta di selezionare tutti gli elementi del bambino in modo ricorsivo in CSS.

Conclusione

Per selezionare tutti gli elementi figlio di un particolare elemento genitore, è necessario aggiungere "*"Simbolo dopo il selettore ID o classe dell'elemento genitore nell'elemento in stile CSS. Le proprietà CSS aggiunte al suo interno saranno quindi implementate su tutti gli elementi figlio. Questo articolo ha fornito una guida completa al metodo per selezionare tutti gli elementi figlio in CSS.