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

127

मेरे पास divs के साथ एक html पेज है जिसमें फॉर्म s1 , s2 इत्यादि की आईडी है ।

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

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

//css
#s1{
...
}

क्या सीएसएस में कुछ ऐसे रेग्युलर एक्सप्रेशन हैं जो मैं डिव के सेट पर स्टाइल लागू करने के लिए उपयोग कर सकता हूं ।

css regex

— अंकित
स्रोत

9

आपको शायद classउन आईडी के साथ तत्वों के वर्ग की पहचान करने के लिए विशेषता का उपयोग करना चाहिए

— लीगी

191

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

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

यह कहता है कि #s Div के अंदर ऐसे किसी भी div तत्वों का चयन करें, जिनके पास 's' अक्षर से शुरू होने वाली ID हो।

देखें यहाँ बेला ।

W3 CSS चयनकर्ता डॉक्स यहाँ ।

— steveax
स्रोत

1

यह सीएसएस 2.1 के लिए एक सिफारिश में था; यह IE 7, ओपेरा 9 आदि द्वारा समर्थित है। स्रोत: developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

— माइक एस

2

तुमने मेरा दिन बना दिया। मैं एक क्रॉलर में कुछ उन्नत सीएसएस चयनकर्ताओं को शामिल करना चाह रहा था ताकि इसे उपयोगकर्ता-विन्यास योग्य बनाया जा सके। कि ^ = च ****** रेगिस्तान में पानी की तरह था।

— DGoiko

59

इस उत्तर के पूरक के रूप में आप $अंतिम मैचों *को प्राप्त करने के लिए और मूल्य के नाम पर कहीं भी मैच प्राप्त करने के लिए उपयोग कर सकते हैं ।

मेल कहीं भी: .col-md, .left-col, .col, .tricolor, आदि

[class*="col"]

शुरुआत में मेल खाता है: .col-md, .col-sm-6, आदि

[class^="col-"]

अंत में मेल खाता है: .left-col, .right-col, आदि

[class$="-col"]

— uruapanmexicansong
स्रोत

(मुझे पता है कि यह पागल लगता है लेकिन) क्या प्रत्येक मैच के साथ "विनाश" करना संभव है?

— वाल्टर

24

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

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

तथा

.sec {
    ...
}

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

#sections > div {
    ...
}

— एनिमूसन
स्रोत

10

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

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

सभी divs से मेल खाते हैं जो के प्रत्यक्ष वंशज हैं #main।

#main > div

उन सभी का मिलान करें divजो प्रत्यक्ष या अप्रत्यक्ष वंशज हैं #main।

#main div

पहले से मेल खाता है divजो की प्रत्यक्ष वंशज है #sections।

#main > div:first-child

divकिसी विशिष्ट विशेषता के साथ मिलान करें ।

#main > div[foo="bar"]

— टिम मेदोरा
स्रोत

5

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

HTML:

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

सीएसएस:

//css
.myclass
{
   ...
}

— ऑरेलियो डी रोजा
स्रोत

3

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

— १

मैं यह कहते हुए jsut था कि मैं id सेलेक्टर्स का उपयोग करने से बचने की कोशिश करता हूं क्योंकि तब यदि आप बाद में स्टाइल को ओवरराइड करने जाते हैं (किसी विशिष्ट पेज के लिए कहते हैं) तो आप अंत में उसी चयनकर्ता का उपयोग करने के लिए समाप्त होते हैं + जो भी आप इसे और अधिक बनाने के लिए उपयोग कर सकते हैं मूल चयनकर्ता की तुलना में विशिष्ट है। बुरा नहीं है अगर यह सिर्फ .thepage #someidलेकिन यह वास्तव में उन्नत टेबल या सूची स्टाइल पर लंबे समय तक घुमावदार हो सकता है। यह आपके उत्तर की इतनी आलोचना थी कि आपके उत्तर पर विस्तार की सामान्य सलाह दी गई थी :-)

— prodigitalson

0

मैं आमतौर पर उपयोग करता *हूं जब मैं चाहता हूं कि उन सभी तार मिलें जिनमें वांछित अक्षर हैं।

* रेगेक्स में प्रयुक्त, सभी वर्णों को प्रतिस्थापित करता है।

SASS या CSS में उपयोग कुछ [id*="s"]ऐसा होगा और इसे id "s ......" के साथ सभी DOM तत्व मिलेंगे।

/* add red color to all div with id s .... elements */

div[id^="s"] {
    color: red;
}

— Niko9
स्रोत

-4

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

(([a-z]{5,6}.*?\))|([\d.+-]?)(?![a-z\s#.()%])(\d?\.?\d?)?[a-z\d%]+)|(url\([/"'][a-z:/.]*['")]\))|(rgb|hsl)a?\(\d+%?,?\s?\d+%?,?\s?\d+%?(,\s?\d+\.?\d?)?\)|(#(\w|[\d]){3,8})|([\w]{3,8}(?=.*-))

डेमो https://regexr.com/4a22i

— मैक्स हैल्किन
स्रोत

-11

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

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

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

— संदीप एस
स्रोत

3

@AustinHenley Bcoz यह समाधान नहीं है। जैसा कि मैंने प्रश्न में उल्लेख किया है, मैं हर बार सीएसएस नियमों को संपादित नहीं करना चाहता।

— अंकित

यह एक मूल्य के लायक नहीं है। यदि आप जानते हैं, उदाहरण के लिए, कि 10 divs थे, तो आप # s1 से # s10 डाल सकते हैं और आपको चयनकर्ताओं को स्पर्श नहीं करना होगा। ऐसा करने का सही तरीका कक्षाओं के साथ है लेकिन यह समाधान आपकी धारणाओं को ले रहा है और समाधान का प्रयास कर रहा है।

— jcuenod

4

यह वास्तव में कोई फर्क नहीं पड़ता अगर यह इस दिए गए स्थिति के लिए एक संभावित समाधान है। यह जवाब सवाल का बिल्कुल भी जवाब नहीं देता है क्योंकि सबसे बुनियादी सीएसएस ज्ञान वाला कोई भी व्यक्ति कई चयनकर्ताओं या कक्षाओं का उपयोग करना जानता है।

— जयंत भावल