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




css-selectors wildcard (4)

मेरे पास ये divs हैं कि मैं .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;
}

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


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

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

यह उन सभी आईडी का चयन करेगा जो 'term-' शुरू होते हैं।

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


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

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

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

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

[att|=val]

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


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

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

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

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

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

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





wildcard