सीएसएस में नियमित अभिव्यक्ति का उपयोग करना?

Question

मैं divs कि आईडी (रों) प्रपत्र एस 1 की, s2 और इतने पर के साथ एक html पृष्ठ है।

<div id="sections"> 
    <div id="s1">...</div> 
    <div id="s2">...</div> 
    ... 
</div> 

मैं इन वर्गों/divs (आईडी के आधार पर) के एक उप-समूह में एक सीएसएस संपत्ति लागू करना चाहता हूं। हालांकि, हर बार जब मैं div जोड़ता हूं, तो मुझे इस तरह से अनुभाग के लिए सीएसएस जोड़ना होगा।

//css 
#s1{ 
... 
} 

वहाँ सीएसएस में नियमित अभिव्यक्ति है कि मैं divs का एक सेट करने के लिए शैली लागू करने के लिए उपयोग कर सकते हैं की तरह कुछ है।

Answer 1

आप का प्रबंधन कर सकते पिछली उत्तरों के रूप में किसी भी प्रकार के रेगेक्स के बिना उन तत्वों का चयन करना, लेकिन सीधे प्रश्न का उत्तर देने के लिए, हाँ आप चयनकर्ताओं में रेगेक्स के एक रूप का उपयोग कर सकते हैं:

#sections div[id^='s'] { 
    color: red; 
} 

यह कहता है कि # सेक्शन div के अंदर कोई भी div तत्व चुनें जिसमें अक्षर 'से शुरू होने वाली आईडी है।

fiddle here देखें।

W3 CSS selector docs here।

Answer 2

सबसे पहले, HTML दस्तावेज़ में आइटम्स मिलान करने के कई तरीके हैं। आईडी द्वारा मिलान करना कम से कम इस्तेमाल किया जाना चाहिए।

किसी भी तत्व के लिए स्टाइल नियम लागू करने के लिए आप उपलब्ध कुछ चुनिंदा चयनकर्ताओं/पैटर्न को देखने के लिए पहले इस संदर्भ से शुरुआत करें।

http://www.w3.org/TR/selectors/

इन चयनकर्ताओं के अधिकांश आईई 9 और अन्य सभी आधुनिक ब्राउज़र के साथ काम करेंगे; महत्वपूर्ण चयनकर्ता आईई 8 में काम करते हैं (परिणाम आईई 7 और निचले स्तर में भिन्न होंगे)।

दूसरा, जब तक आपको वास्तव में आईडी द्वारा स्पष्ट रूप से आइटम नाम देने की आवश्यकता नहीं है, तो इसके बजाय एक पदानुक्रम चयनकर्ता का उपयोग करने पर विचार करें। यह कोड को अधिक क्लीनर बनाता है।

सभी DIV एस से मिलान करें जो #sections के प्रत्यक्ष वंशज हैं।

#sections > DIV 

मैच सब DIV रों जो #sections के प्रत्यक्ष या अप्रत्यक्ष वंशज हैं।

#sections DIV 

मैच पहले DIV जो #sections के एक प्रत्यक्ष वंशज है।

#sections > DIV:first-child 

एक विशिष्ट विशेषता के साथ DIV से मेल करें।

#sections > DIV[foo="bar"] 

Answer 3

आप सिर्फ अपने DIVs से प्रत्येक के लिए एक वर्ग जोड़ सकते हैं और इस तरह से वर्ग के लिए नियम लागू कर सकते हैं:

HTML:

<div class="myclass" id="s1">...</div> 
<div class="myclass" id="s2">...</div> 

सीएसएस:

//css 
.myclass 
{ 
    ... 
} 

Answer 4

एक आईडी तत्व विशिष्ट रूप से तत्व की पहचान करने के लिए है। उस पर लागू कोई भी शैली उस तत्व के लिए अद्वितीय भी होनी चाहिए। यदि आपके पास शैलियों हैं तो आप पर कई तत्वों पर आवेदन करना चाहते हैं, तो आपको आईडी चयनकर्ताओं पर भरोसा करने के बजाय सभी को एक वर्ग जोड़ना चाहिए ...

<div id="sections"> 
    <div id="s1" class="sec">...</div> 
    <div id="s2" class="sec">...</div> 
    ... 
</div> 

और

.sec { 
    ... 
} 

या अपने विशिष्ट मामले में आप अपने माता पिता कंटेनर के अंदर सब डिवीजनों को चुन सकते हैं, अगर और कुछ नहीं, इसके अंदर है, इसलिए जैसे:

#sections > div { 
    ... 
} 

Answer 5

वहाँ सीएसएस भी में विशेष तत्वों का चयन करने के लिए एक और आसान तरीका है ...

#s1, #s2, #s3 { 
    // set css attributes here 
} 

अगर आप केवल से चुनने के लिए कुछ तत्वों है, और वर्गों के साथ परेशान करने के लिए चाहते हैं न, यह आसानी से भी काम करेगा ।