CSS चयनकर्ता में क्लास और ID को कैसे संयोजित करें?

Question

यदि मेरे पास निम्नलिखित div है:

<div class="sectionA" id="content">
    Lorem Ipsum...
</div>

क्या एक शैली को परिभाषित करने का एक तरीका है जो विचार "ए डिव विद id='content'एंड class='myClass'" को व्यक्त करता है ?

या क्या आप के रूप में बस एक ही रास्ता या दूसरे में जाना है

<div class="content-sectionA">
    Lorem Ipsum...
</div>

या

<div id="content-sectionA">
    Lorem Ipsum...
</div>

Comments

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

— TStamper

@ सीटीएमपर: जरूरी नहीं। आप केवल स्थैतिक दस्तावेजों के संदर्भ में सोच रहे हैं। मामले में, आपके पास img#Inboxअपने पृष्ठ पर एक आइकन हो सकता है जो आम तौर पर 50% अस्पष्टता के लिए निर्धारित होता है। हालांकि, जब उपयोगकर्ता के पास एक संदेश होता है, तो आप चाहते हैं कि यह 100% अस्पष्टता पर सेट हो, और बैकएंड activeतत्व में एक वर्ग जोड़कर इसे इंगित करता है। ऐसे परिदृश्य में, यह समझ में आता है कि एक चयनकर्ता है जो आईडी और क्लासनाम दोनों को जोड़ता है।

— लेसे माजेस्ट

@TStamper: इसके अलावा, अधिक विशिष्ट आईडी + वर्ग कॉम्बो चयनकर्ता नहीं है, यह आईडी आईडी से अधिक वजन / पूर्वता देता है? AFAIK, यह चाहिए। (आईओडब्ल्यू, आईडी + क्लास कॉम्बो चयनकर्ता के नियम आईडी कॉम्बो चयनकर्ता के नियमों को ओवरराइड करेंगे। (यह सिर्फ इस थ्रेड को खोजने के लिए मेरा कारण / आवश्यकता थी।)

— गोविंदा

इसलिए, मैं ऐसी ही स्थिति बना रहा हूं। उदाहरण के लिए मेरे पास कई उत्पाद हैं जिनका वर्णन है, लेकिन व्यक्तिगत उत्पादों पर भी विशिष्ट नियंत्रण चाहते हैं, इसलिए, क्या मैं ऐसा कर सकता हूं: code<p id = Product_1 वर्ग = उत्पाद> उत्पाद 1 </ p> <p id = Product_2 वर्ग = उत्पाद> उत्पाद 2 </ p> code यह सभी उत्पादों की सामान्य स्टाइल की अनुमति देता है, लेकिन विशिष्ट उत्पादों के लिए व्यक्तिगत स्टाइल की भी अनुमति देता है?

— तामेर ज़ियादी

Answer 1

अपनी स्टाइलशीट में:

div#content.myClass

संपादित करें: ये भी मदद कर सकते हैं:

div#content.myClass.aSecondClass.aThirdClass /* Won't work in IE6, but valid */
div.firstClass.secondClass /* ditto */

और, आपके उदाहरण के अनुसार:

div#content.sectionA

संपादित करें, 4 साल बाद: चूंकि यह सुपर पुराना है और लोग इसे ढूंढते रहते हैं: अपने चयनकर्ताओं में टैगनेम का उपयोग न करें। #content.myClassइससे अधिक तेज़ है div#content.myClassक्योंकि टैगनाम एक फ़िल्टरिंग चरण जोड़ता है जिसकी आपको आवश्यकता नहीं है। चयनकर्ताओं में केवल उन नामों का उपयोग करें जहाँ आपको होना चाहिए!

Comments

यह निर्दिष्ट करना कि आईडी एक div से संबंधित है, केवल रेंडरिंग प्रदर्शन के लिए हानिकारक हो सकता है (यद्यपि यह बहुत ही नगण्य है) बिना किसी लाभ के आईडी के रूप में यह पहले से ही अद्वितीय है। मैं इसे साफ करने के बजाय # content.myClass के साथ जाऊंगा।

— रहस्यवाद

div.class#idकम सिफारिश के बराबर होना चाहिए; पहले चयनकर्ता के अधिक विशिष्ट भागों का उपयोग करें।

— एसएफ।

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

— C4d

Answer 2

Css में #header .calloutऔर बीच में अंतर हैं #header.callout।

यहाँ "सादा अंग्रेजी" है #header .callout:
श्रेणी के नाम के साथ उन सभी तत्वों का चयन करें calloutजो कि एक आईडी के साथ तत्व के वंशज हैं header।

और #header.calloutइसका मतलब है:
उस तत्व का चयन करें जिसमें एक आईडी है headerऔर एक वर्ग का नाम भी है callout।

आप यहाँ और सीएसएस ट्रिक्स पढ़ सकते हैं

Comments

मैंने व्हाट्सएप से यह गलती की: #id .class vs # id.class

— ERJAN

Answer 3

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

#content.sectionA{some rules}

आपको divआईडी के सामने अन्य लोगों द्वारा सुझाए गए तरीकों की आवश्यकता नहीं है।

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

यह उबलता है:

 .sectionA{some general rules here}
 #content{specific rules, and overrides for things in .sectionA}

सही बात?

Answer 4

आम तौर पर आपको आईडी द्वारा निर्दिष्ट तत्व को वर्गीकृत करने की आवश्यकता नहीं होनी चाहिए, क्योंकि आईडी हमेशा अद्वितीय होती है, लेकिन अगर आपको वास्तव में आवश्यकता है, तो निम्नलिखित काम करना चाहिए:

div#content.sectionA {
    /* ... */
}

Answer 5

आप सीएसएस में आईडी और क्लास को जोड़ सकते हैं, लेकिन आईडी अद्वितीय होने का इरादा रखते हैं, इसलिए सीएसएस चयनकर्ता के लिए एक क्लास को जोड़ने से यह अधिक योग्य हो जाएगा।

Comments

ये एक अच्छा बिंदु है। मैं सोच रहा था कि शायद आपके पास बहुत सामान्य कक्षाओं का एक सेट है (फ्लोट, ऊंचाई / चौड़ाई, शायद फ़ॉन्ट जैसी चीजें सेट करना) और आप इस अद्वितीय अपवाद में उनमें से कुछ को ओवरराइड करना चाहेंगे?

— आजम

जब तक आप एक ही स्टाइलशीट का इस्तेमाल अलग-अलग पेज के साथ नहीं करते। :-)

— पैट्रिक मैकेलेनै

एक अन्य उदाहरण: जब कक्षाओं को जावास्क्रिप्ट के साथ गतिशील रूप से जोड़ा जाता है (#

— alternFields.enabled

यहां तक ​​कि अगर आप अलग-अलग पृष्ठों के साथ एक ही स्टाइलशीट का उपयोग करते हैं, तो वास्तव में शरीर पर एक वर्ग रखना बेहतर होगा या आईडी के लिए एक शैली होगी और फिर उपयुक्त ओवरराइडिंग शैलियों के साथ कक्षाओं के लिए अलग-अलग वर्ग परिभाषाएं।

— एरिक Wendelin

हाँ, मुझे लगता है कि ऐसा करना काफी आम है। उदा ली # SomeTab.state- चयनित

— 18

Answer 6

का उपयोग करें: tag.id ; tag#classअपने चर में टैग चर में।

Comments

मुझे लगता है कि आपने इसे थोड़ा सा मिलाया - tag.class, और टैग # id, नहीं?

— हरिज कृष्णिस

Answer 7

Ids को विस्तृत दस्तावेज़ माना जाता है, इसलिए आपको दोनों के आधार पर चयन नहीं करना चाहिए। आप के साथ एक तत्व कई वर्गों आवंटित कर सकते हैंclass="class1 class2"

Comments

वर्ग बदल सकता है। उदाहरण के लिए, आप div # id.active और div # id.inactive रख सकते हैं।

— डैनियल मौरा

काफी उचित है, यह सोचने के लिए आओ, मैंने इस कार्यक्षमता का उपयोग किया है, लेकिन मुझे गलत समझा कि वांछित व्यवहार क्या था।

— बेन ह्यूजेस

Answer 8

मुझे लगता है कि आप सभी गलत हैं। आईडी बनाम कक्षा विशिष्टता का सवाल नहीं है; उनके पास पूरी तरह से अलग-अलग तार्किक उपयोग हैं।

किसी पृष्ठ के विशिष्ट भागों की पहचान करने के लिए आईडी का उपयोग किया जाना चाहिए: हेडर, नेवी बार, मुख्य लेख, लेखक एट्रिब्यूशन, फुटर।

पेज पर शैलियों को लागू करने के लिए कक्षाओं का उपयोग किया जाना चाहिए। मान लीजिए कि आपके पास एक सामान्य पत्रिका साइट है। साइट के प्रत्येक पृष्ठ में एक ही तत्व होने जा रहे हैं - हेडर, नेवी, मुख्य लेख, साइडबार, फुटर। लेकिन आपकी पत्रिका के अलग-अलग खंड हैं - अर्थशास्त्र, खेल, मनोरंजन। आप चाहते हैं कि तीन खंड अलग-अलग दिखें - अर्थशास्त्र रूढ़िवादी और वर्ग, खेल एक्शन-वाई, मनोरंजन उज्ज्वल और युवा।

आप उसके लिए कक्षाओं का उपयोग करें। आप कई आईडी बनाना नहीं चाहते हैं - # अर्थशास्त्र-लेख और # खेल-लेख और # मनोरंजन-लेख। इसका कोई मतलब नहीं है। इसके बजाय, आप तीन वर्गों को परिभाषित करेंगे। आर्थिक, खेल और संगति, फिर प्रत्येक के लिए #nav, #article और #footer id परिभाषित करें।

Comments

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

— वाल्टर श्वार्ज

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

— वाल्टर श्वार्ज

Answer 9

.sectionA[id='content'] { color : red; }

जब doctype html 4.01 है तो काम नहीं करेगा ...