वाइल्डकार्ड * कक्षाओं के लिए सीएसएस में

Question

मेरे पास ये डिव हैं जिन्हें मैं स्टाइल कर रहा हूं .tocolor, लेकिन मुझे अद्वितीय पहचानकर्ता 1,2,3,4 आदि की भी आवश्यकता है, इसलिए मैं इसे एक अन्य वर्ग के रूप में जोड़ रहा हूं tocolor-1।

<div class="tocolor tocolor-1">   tocolor 1   </div>
<div class="tocolor tocolor-2">   tocolor 2   </div>
<div class="tocolor tocolor-3">   tocolor 3   </div>
<div class="tocolor tocolor-4">   tocolor 4   </div>

.tocolor{
  background: red;
}

क्या सिर्फ 1 क्लास करने का एक तरीका है tocolor-*। मैंने *इस सीएसएस में वाइल्डकार्ड का उपयोग करने की कोशिश की , लेकिन यह काम नहीं किया।

.tocolor-*{
  background: red;
}

Comments

यहाँ चयनकर्ताओं के बारे में आधिकारिक CSS3 साइट है: w3.org/TR/css3-selectors और एक कम्पैटिबिलिटी

— GarfieldKlon

Answer 1

आपको जिस चीज की आवश्यकता है उसे विशेषता चयनकर्ता कहा जाता है। एक उदाहरण, आपके html संरचना का उपयोग करते हुए, निम्नलिखित है:

div[class^="tocolor-"], div[class*=" tocolor-"] {
    color:red 
}

divआप के स्थान पर किसी भी तत्व को जोड़ सकते हैं या पूरी तरह से हटा सकते हैं, और आप के स्थान में classनिर्दिष्ट तत्व के किसी भी विशेषता को जोड़ सकते हैं।

[class^="tocolor-"]- "tocolor-" से शुरू होता है।
[class*=" tocolor-"]- स्पेसिंग कैरेक्टर के बाद सीधे होने वाले "tocolor-" को शामिल करता है।

डेमो: http://jsfiddle.net/K3693/1/

CSS विशेषता चयनकर्ताओं के बारे में अधिक जानकारी, आप यहां और यहां पा सकते हैं । और MDN डॉक्स MDN डॉक्स से

Comments

कूल जानकारी। केवल कैविएट है यदि प्रदर्शन एक समस्या है, तो अधिकांश सीएसएस लिंटर्स विशेषता चयनकर्ताओं को खारिज कर देंगे जो कि regex (जैसे '*') धीमी गति के प्रदर्शन के b / c का उपयोग करते हैं। प्रीप्रोसेसर (जैसे Sass) का उपयोग करने के अपवाद के साथ, क्या ऐसा करने का कोई अन्य संभावित तरीका है?

— कोडफिनिटी

क्या यह जांचने का कोई तरीका है कि क्या क्लास विशेषता में कई सबस्ट्रिंग हैं? शायद कुछ पसंद है div[class*="foo"][class="bar"]?

— कॉनर

हमारे "उदाहरण" में वह जगह बहुत ही कातिल है। मैं जो देख सकता हूं, वह वहां नहीं होना चाहिए, सही?

— थॉमस

@Thomas class="foo tocolor-red"मैचों को सुनिश्चित करने के लिए आवश्यक है , लेकिन नहींclass="foo fromtocolor-red-blue"

— aleclarson

इसके लिए धन्यवाद। मैं कुछ वर्षों से इस तकनीक का उपयोग कर रहा हूं, लेकिन कभी भी यह एहसास नहीं हुआ कि कक्षा ^ = केवल HTML वर्ग प्रविष्टि की शुरुआत पर लागू होती है। मुझे लगा कि यह HTML टैग के लिए परिभाषित सभी वर्ग नामों पर लागू है।

— BevansDesign

Answer 2

हाँ आप यह कर सकते हैं।

*[id^='term-']{
    [css here]
}

इसके साथ शुरू होने वाली सभी आईडी का चयन करेंगे 'term-'।

ऐसा नहीं करने के कारण के रूप में, मैं देखता हूं कि इस तरह का चयन करना कहां बेहतर होगा; शैली के लिए, मैं इसे स्वयं नहीं करूंगा, लेकिन यह संभव है।

Comments

इस IDआधारित परिशिष्ट के लिए धन्यवाद , केवल इसके लिए नहीं class।

— खोम नाजिद

Answer 3

एक वैकल्पिक समाधान:

div[class|='tocolor'] "टोलर-" के साथ शुरू होने वाले "वर्ग" विशेषता के मूल्यों के लिए मेल खाएगा, जिसमें "टोलर -1", "टोलर -2", आदि शामिल हैं।

सावधान रहें कि यह मेल नहीं खाएगा

<div class="foo tocolor-">

संदर्भ: https://www.w3.org/TR/css3-selectors/#attribute-repretation

[att|=val]

एट विशेषता के साथ एक तत्व का प्रतिनिधित्व करता है, इसका मूल्य या तो बिल्कुल "वैल" या "वैल" से शुरू होता है जिसके तुरंत बाद "-" (यू + 002 डी) होता है।

Comments

यदि classविशेषता किसी अन्य वर्ग के साथ शुरू नहीं होती है , तो यह काम नहीं करेगा tocolor।

— BoltClock

यह Qt के विजेट स्टाइलशीट में भी खूबसूरती से काम करता है। उदाहरण के लिए, नाम के सभी लेबल पर एक शैली लागू करने के लिए foo*, आप करेंगेQLabel[objectName|='foo'] { ... }

— मोनिका

जैसा कि @BoltClock ने कहा, यह समाधान टूट जाता है यदि तत्व में कई कक्षाएं हैं और वे उस वर्ग के साथ शुरू नहीं करते हैं जो ओपी की तलाश में है।

— 23

Chrome 78 में काम नहीं करता है, * और ^ हालांकि काम करते हैं।

— गॉर्डन मोहरीन

Answer 4

यदि आपको divs के और स्टाइल के लिए विशिष्ट पहचानकर्ता की आवश्यकता नहीं है और आप HTML5 का उपयोग कर रहे हैं तो आप कस्टम डेटा विशेषता के साथ प्रयास कर सकते हैं। यहां पढ़ें या Google खोज के लिए प्रयास करेंHTML5 Custom Data Attributes