Zaznacz wszystkie elementy potomne rekurencyjnie w CSS

407

Jak wybrać rekurencyjnie wszystkie elementy potomne?

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

Ta klasa rzuca klasę tylko na zdefiniowaną nazwę klasy i wszystkie bezpośrednie dzieci. Jak w prosty sposób wybrać wszystkie childNodes w ten sposób:

div.dropdown, 
div.dropdown > *, 
div.dropdown > * > *, 
div.dropdown > * > * > *, 
div.dropdown > * > * > * > * {
    color: red;
}
css css-selectors clarkk
źródło

Odpowiedzi:

621

Użyj białej spacji, aby dopasować wszystkich potomków elementu:

div.dropdown * {
    color: red;
}

x ypasuje do każdego elementu y znajdującego się wewnątrz x , niezależnie od tego, jak głęboko jest ono zagnieżdżone - dzieci, wnuki i tak dalej.

Gwiazdka *pasuje do dowolnego elementu.

Oficjalna specyfikacja: CSS 2.1: Rozdział 5.5: Selektory potomne

anroesti
źródło
działa, ale teraz zastępuje wszystkie inne klasy, nawet jeśli mają wyższy priorytet .. (są one umieszczane później w pliku css)
clarkk
Selektor odgrywa również rolę w tym, jaki priorytet mają właściwości, a nie tylko w tym, gdzie pojawiają się w pliku. Możesz spróbować dodać „! Ważne” do swoich wartości, np.color: red !important;
anroesti
Wiem, to trochę brzydkie. Zamiast tego możesz spróbować napisać bardziej precyzyjne selektory, są szanse, że to też zadziała. (np. #head ul→ #head ul#navi)
anroesti
2
Ok, bardzo prosty przykład: p.xyjest ważniejszy niż p, ponieważ jest bardziej szczegółowy. jsfiddle.net/ftJVX
anroesti
1
co jeśli chcę wszystkie dzieci, które miały określoną klasę?
MEM
144

Reguła jest następująca: 

A B

B jako potomek A.

A > B

B jako dziecko A

Więc 

div.dropdown *

i nie 

div.dropdown > *
Abdennour TOUMI
źródło