सीएसएस

Question

का उपयोग कर कई तत्वों का चयन करने के लिए मैं निम्नलिखित मार्कअप है:

<div class="c1"> 
    <div class="c2"> 
    <div class="c3"> 
     <input> 
     <textarea></textarea> 
    </div> 

    <input> 
    <textarea></textarea> 
    </div> 
</div> 

मैं केवल एक सीएसएस नियम के साथ div.c3 से input और textarea तत्वों का मिलान करना चाहते हैं। मैं

div.c1 .c2 .c3 input,textarea { border: 1px solid #f00; } 

उपयोग कर रहा हूँ, लेकिन यह सब textareas, न केवल एक c3 div में cotnained मेल खाता है।

क्या यह संभव है, या क्या मुझे प्रत्येक तत्व के लिए अलग सीएसएस चयनकर्ता लिखना चाहिए?

लाइव उदाहरण के लिए http://jsfiddle.net/Bp3qn/1/ पर देखें।

---

मैं http://jsfiddle.net/Bp3qn/3/

मैं केवल इनपुट और पाठ क्षेत्र c1-> c2-> सी 3 कंटेनरों में निहित की जरूरत है अद्यतन, पर प्रकाश डाला करने के लिए नहीं अन्य संयोजन।

Answer 1

आप चयनकर्ता में अन्य तत्वों की जरूरत नहीं है जब तक आप केवल अगर यह div.c1 .c2 के भीतर है .c3 मिलान करना चाहते हैं:

.c3 input, 
.c3 textarea { 
    /* that's it! */ 
} 

यदि आप करते हैं (प्रति अपने संपादित), इस का उपयोग करें:

div.c1 .c2 .c3 input, 
div.c1 .c2 .c3 textarea{ 
    border: 1px solid #f00; 
} 

डेमो: http://jsfiddle.net/wesley_murch/Bp3qn/6/

---

संपादन के बाद: thats मैं क्या से बचने के लिए कोशिश कर रहा हूँ (मेरा असली स्टाइलशीट एक बहुत अधिक जटिल है और सीएसएस नियम अब कर रहे हैं, और उसके पढ़ने के लिए मुश्किल हो रही है)

कि में

<div class="c3 special"> 

.c3.special input, 
.c3.special textarea{ 
    border: 1px solid #f00; 
} 

डेमो:: http://jsfiddle.net/wesley_murch/Bp3qn/7/

मामला है, चीजों को आसान सिर्फ इतना है कि .c3 इस तरह के अन्य वर्ग को जोड़ने बनाने के लिए

आप चयनकर्ता संभव के रूप में छोटे होना चाहिए और वहाँ .c3.special का कोई अन्य बच्चों सिर्फ स्टार चयनकर्ता (लगभग कभी नहीं की सिफारिश की) का उपयोग कर रहे हैं, तो:

.c3.special * {border: 1px solid #f00;} 

Answer 2

div.c1 .c2 .c3 input,.c3 textarea { border: 1px solid #f00; }