CSS में सभी बाल तत्वों का पुनरावर्ती रूप से चयन करें

Question

आप पुनरावर्ती रूप से सभी बाल तत्वों का चयन कैसे कर सकते हैं?

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

यह वर्ग केवल परिभाषित क्लासनेम और सभी तात्कालिक बच्चों पर एक कक्षा फेंकता है। आप कैसे, एक सरल तरीके से, इस तरह से सभी चाइल्डकोड चुन सकते हैं:

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

Answer 1

किसी तत्व के सभी वंशजों को मिलाने के लिए एक सफेद स्थान का उपयोग करें :

div.dropdown * {
    color: red;
}

x yहर तत्व y से मेल खाता है जो x के अंदर है , लेकिन गहराई से नेस्टेड हो सकता है - बच्चे, पोते और इतने पर।

तारांकन *किसी भी तत्व से मेल खाता है।

आधिकारिक विशिष्टता: सीएसएस 2.1: अध्याय 5.5: वंशज चयनकर्ता

Comments

यह काम करता है, लेकिन अब यह अन्य सभी वर्गों को

— पछाड़ देता है

चयनकर्ता यह भी भूमिका निभाता है कि गुणों में क्या प्राथमिकता है, न कि केवल उस फ़ाइल में जहां वे दिखाई देते हैं। आप अपने मूल्यों में ` color: red !important;

— -महत्वपूर्ण`

मुझे पता है, यह थोड़ा बदसूरत है। आप इसके बजाय अधिक सटीक चयनकर्ताओं को लिखने की कोशिश कर सकते हैं, संभावना है, यह भी काम करेगा। (उदा #head ul→ #head ul#navi)

— अरोस्टी

ठीक है, बहुत बुनियादी उदाहरण: p.xyसे अधिक महत्वपूर्ण है p, क्योंकि यह अधिक विशिष्ट है। jsfiddle.net/ftJVX

— aroesti

क्या होगा यदि मैं एक विशिष्ट वर्ग वाले सभी बच्चे चाहता हूं?

— एमईएम

Answer 2

नियम इस प्रकार है:

A B 

B, A के वंशज के रूप में

A > B 

B, A के बच्चे के रूप में

इसलिए

div.dropdown *

और नहीं

div.dropdown > *