Seleziona tutti gli elementi figlio in modo ricorsivo nei CSS

407

Come puoi selezionare ricorsivamente tutti gli elementi figlio?

div.dropdown, div.dropdown > * {
    color: red;
}

Questa classe genera solo una classe sul className definito e su tutti i figli immediati. Come puoi, in modo semplice, scegliere tutti i nodi figlio in questo modo:

div.dropdown, 
div.dropdown > *, 
div.dropdown > * > *, 
div.dropdown > * > * > *, 
div.dropdown > * > * > * > * {
    color: red;
}

css css-selectors

— clarkk
fonte

Risposte:

621

Usa uno spazio bianco per abbinare tutti i discendenti di un elemento:

div.dropdown * {
    color: red;
}

x ycorrisponde a ogni elemento y che si trova all'interno di x , per quanto profondamente annidato possa essere: figli, nipoti e così via.

L'asterisco * corrisponde a qualsiasi elemento.

Specifiche ufficiali: CSS 2.1: Capitolo 5.5: Selettori discendenti

— anroesti
fonte

funziona, ma ora sovrascrive tutte le altre classi anche se hanno una priorità più alta .. (sono posizionate più avanti nel file css)

— clarkk,

Il selettore svolge anche un ruolo in quale priorità hanno le proprietà, non solo in quale parte del file appaiono. Potresti provare ad aggiungere `! Important` ai tuoi valori, ad escolor: red !important;

— Anroesti il

Lo so, è un po 'brutto. Potresti invece provare a scrivere selettori più precisi, è probabile che anche questo funzioni. (es. #head ul→ #head ul#navi)

— anroesti,

Ok, esempio molto semplice: p.xyè più importante di p, perché è un po 'più specifico. jsfiddle.net/ftJVX

— anroesti il

e se volessi tutti i bambini che avevano una classe specifica?

— MEM

144

La regola è la seguente:

A B

B come discendente di A

A > B

B come figlio di A

Così

div.dropdown *

e non

div.dropdown > *

— Abdennour TOUMI
fonte