वर्ग उपसर्ग द्वारा एक सीएसएस चयनकर्ता है?

175

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

उदाहरण के लिए, मैं एक नियम चाहता हूं जो उस वर्ग पर लागू होगा जिसके पास वर्ग है जो status-(ए और सी के साथ शुरू होता है, लेकिन निम्नलिखित स्निपेट में बी नहीं):

<div id='A' class='foo-class status-important bar-class'></div>
<div id='B' class='foo-class bar-class'></div>
<div id='C' class='foo-class status-low-priority bar-class'></div>

के संयोजन के कुछ प्रकार:
div[class|=status]औरdiv[class~=status-]

क्या यह सीएसएस 2.1 के तहत उल्लेखनीय है? क्या यह किसी सीएसएस युक्ति के तहत उल्लेखनीय है?

नोट: मुझे पता है कि मैं अनुकरण करने के लिए jQuery का उपयोग कर सकता हूं।

css css-selectors

— THX-1138
स्रोत

373

यह CSS2.1 के साथ उल्लेखनीय नहीं है, लेकिन यह CSS3 की विशेषता सबस्ट्रिंग-मैचिंग चयनकर्ताओं के साथ संभव है (जो IE8 + में समर्थित हैं :

div[class^="status-"], div[class*=" status-"]

दूसरे विशेषता चयनकर्ता में अंतरिक्ष चरित्र को नोटिस करें। यह divउन तत्वों को उठाता है जिनकी classविशेषता इन स्थितियों में से किसी से मिलती है:

[class^="status-"] - "स्थिति-" से शुरू होता है
[class*=" status-"]- इसमें स्पेसिंग कैरेक्टर के बाद सीधे "स्टेटस-" होता है। HTML स्पेस के अनुसार क्लास के नाम व्हाट्सएप द्वारा अलग किए जाते हैं , इसलिए यह महत्वपूर्ण स्पेस कैरेक्टर है। यह कई वर्गों के निर्दिष्ट होने के बाद पहली बार किसी भी अन्य वर्गों की जाँच करता है, और विशेषता मूल्य अंतरिक्ष-गद्देदार (जो कुछ अनुप्रयोगों के साथ हो सकता है जो आउटपुट classविशेषताओं को गतिशील रूप से हो सकता है) पहली कक्षा की जाँच का एक बोनस जोड़ता है ।

स्वाभाविक रूप से, यह jQuery में भी काम करता है, जैसा कि यहां दिखाया गया है ।

ऊपर बताए अनुसार आपको दो विशेषता चयनकर्ताओं को संयोजित करने की आवश्यकता है क्योंकि एक विशेषता चयनकर्ता जैसे [class*="status-"]कि निम्नलिखित तत्व से मेल खाएगा, जो अवांछनीय हो सकता है:

<div id='D' class='foo-class foo-status-bar bar-class'></div>

यदि आप यह सुनिश्चित कर सकते हैं कि ऐसा परिदृश्य कभी नहीं होगा, तो आप सरलता के लिए ऐसे चयनकर्ता का उपयोग करने के लिए स्वतंत्र हैं। हालांकि, ऊपर संयोजन अधिक मजबूत है।

यदि आपके पास HTML स्रोत या मार्कअप जनरेट करने वाले एप्लिकेशन पर नियंत्रण है, तो यह केवल status-इसके statusबजाय उपसर्ग को अपनी कक्षा बनाने के लिए सरल हो सकता है, जैसे कि गम्बो सुझाव देता है ।

— बोल्टकॉक
स्रोत

1

यदि किसी भी अजीब कारण से आपको क्लास बुलाया जाता है status-और आप उस से मेल नहीं खाना चाहते हैं, तो चयनकर्ता और भी जटिल हो जाता है: div[class^="status-"]:not(.status-), div[class*=" status-"]:not(.status-)इसके अलावा आप IE7 / IE8 समर्थन खो देते हैं। शुक्र है, अगर आपका मार्कअप सन्न है, तो आपको ऐसी क्लास को बाहर करने की जरूरत नहीं होगी।

— ०२:२१ पर बोल्टब्लॉक

इस के साथ गलत क्या है: [class*=" anim-overlay-"] a:hover:after{...}। मेरी सीएसएस कक्षाएं हैं anim-overlay-1, anim-overlay-2.....anim-overlay-8

— एमबी परवेज़ रोनी

2

@WebDevRon: आप ^ = भाग को भूल गए। यदि आपकी कक्षा की विशेषता को एनिमेशन-ओवरले के साथ शुरू करने की गारंटी है - तो आपको संभवतः * = भाग की आवश्यकता नहीं है।

— BoltClock

धन्यवाद। एक और बात, क्या मैं इसका उपयोग कर सकता हूं .anim-overlay-*{...}?

— एमबी परवेज़ रोनी

2

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

— BoltClock

14

सीएसएस एट्रीब्यूट चयनकर्ता आपको एक स्ट्रिंग के लिए विशेषताओं की जांच करने की अनुमति देगा। (इस मामले में - एक वर्ग-नाम)

https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

(ऐसा लगता है कि यह वास्तव में 2.1 और 3 के लिए 'सिफारिश' की स्थिति पर है)

यहां बताया गया है कि मैं कैसे सोचता हूं कि यह काम करता है:

[ ]: जटिल चयनकर्ताओं के लिए कंटेनर है यदि आप ...
class: 'वर्ग' वह गुण है जिसे आप इस मामले में देख रहे हैं।
* : संशोधक (यदि कोई हो): इस मामले में - "वाइल्डकार्ड" इंगित करता है कि आप किसी भी मैच की तलाश कर रहे हैं।
test- : गुण का मान (वहाँ एक है) - जिसमें स्ट्रिंग "परीक्षण-" शामिल है (जो कुछ भी हो सकता है)

इसलिए, उदाहरण के लिए:

[class*='test-'] {
  color: red;
}

आप अधिक विशिष्ट हो सकते हैं यदि आपके पास अच्छा कारण है, तत्व के साथ भी

ul[class*='test-'] > li { ... }

मैंने किनारे के मामलों को खोजने की कोशिश की है, लेकिन मुझे * के संयोजन का उपयोग करने की कोई आवश्यकता नहीं है ^और ** सब कुछ मिलता है ...

उदाहरण: http://codepen.io/sheriffderek/pen/MaaBwp

http://caniuse.com/#feat=css-sel2

IE6 के ऊपर सब कुछ खुशी से मानेगा। :)

ध्यान दें कि:

[class] { ... }

एक वर्ग के साथ कुछ भी चुनेंगे ...

— sheriffderek
स्रोत

[class*='test-']जैसे तत्वों की भरपाई कर देंगे <div class='foo-test-bar'>। यह एक किनारे का मामला है जिसे मेरे जवाब में वर्णित ^ और * के संयोजन की आवश्यकता है। और IE6 विशेषता चयनकर्ताओं का समर्थन नहीं करता है।

— BoltClock

@BoltClock - स्पष्ट करने के लिए धन्यवाद! - मैं <EI9 का समर्थन नहीं करता हूं - और मैं कभी भी उन कक्षाओं को नहीं लिखूंगा जो एक दूसरे पर कदम रखेंगे - इसलिए मेरे लिए यह काम करता है। :)

— sheriffderek

6

सीएसएस चयनकर्ताओं के साथ यह संभव नहीं है। लेकिन तुम एक की जगह दो कक्षाएं, जैसे इस्तेमाल कर सकते हैं स्थिति और महत्वपूर्ण बजाय स्थिति महत्वपूर्ण ।

— Gumbo
स्रोत

14

अपने ही वर्ग में अलग के बारे में अच्छा विचार है, लेकिन यह है CSS चयनकर्ताओं के साथ संभव। मेरा जवाब देखिए।

— BoltClock

2

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

<html>
<head>
<title>Test Page</title>
<style type="text/css">
div[class|=status] { background-color:red; }
</style>
</head>
<body>
<div id='A' class='status-important bar-class'>A</div>
<div id='B' class='bar-class'>B</div>
<div id='C' class='status-low-priority bar-class'>C</div>

</body>
</html>

ध्यान दें कि यह केवल इंगित करने के लिए है कि कौन सी CSS विशेषता चयनकर्ता निकटतम है, यह मानने की अनुशंसा नहीं की जाती है कि वर्ग नाम हमेशा सामने होंगे क्योंकि जावास्क्रिप्ट विशेषता को हेरफेर कर सकता है।

— SBUJOLD
स्रोत

2

हाँ, यह सोचा था। जब jQuery तस्वीर में हो जाता है, तो यह एक मुद्दा बन सकता है, क्योंकि यह सामने की कक्षा को सम्मिलित कर सकता है।

— THX-1138

हाँ, मैं अपनी पोस्ट को यह स्पष्ट करने के लिए संपादित करूँगा कि यह स्पष्ट रूप से इसे करने का अनुशंसित तरीका नहीं है। यदि आपके पास वर्ग के नामों पर नियंत्रण है तो गम्बो का सुझाव निश्चित रूप से जाने का तरीका होगा (साथ ही पुराने IE ब्राउज़रों पर विशेषता चयनकर्ताओं का समर्थन नहीं किया गया है)।

— SBUJOLD