CSSですべての子要素を再帰的に選択する

407

すべての子要素を再帰的に選択するにはどうすればよいですか？

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

このクラスは、定義されたclassNameとすべての直接の子に対してのみクラスをスローします。簡単な方法で、次のようにすべてのchildNodeを選択するにはどうすればよいですか。

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

css css-selectors

— クラーク
ソース

回答:

621

空白を使用して、要素のすべての子孫に一致させます。

div.dropdown * {
    color: red;
}

x yxの内部にあるすべての要素yに一致しますが、深くネストされている場合があります-子供、孫など。

アスタリスクは*任意の要素と一致します。

— anroesti
ソース

動作しますが、優先度が高くても他のすべてのクラスをオーバーライドします。（それらはcssファイルの後半に配置されます）

— clarkk

セレクターは、ファイル内の場所だけでなく、プロパティの優先度にも影響します。たとえば、値に `！important`を追加してみてください。例color: red !important;

— anroesti

私は知っています、それは少し醜いです。代わりに、より正確なセレクターを作成してみることもできますが、これも機能します。（例#head ul→ #head ul#navi）

— anroesti

わかりました、非常に基本的な例：より具体的であるため、p.xyはより重要ですp。jsfiddle.net/ftJVX

— anroesti

特定のクラスを持つすべての子供が欲しい場合はどうなりますか？

— MEM 2014年

144

ルールは次のとおりです。

A B

Aの子孫としてのB

A > B

Aの子としてのB

そう

div.dropdown *

ではなく

div.dropdown > *

— アブドナートゥミ
ソース