css - सीएसएस चयनकर्ता में कक्षा और आईडी कैसे गठबंधन करें?





css-selectors (9)


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

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

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

क्या ऐसी शैली को परिभाषित करने का कोई तरीका है जो " id='content' साथ एक div id='content' और class='myClass' " व्यक्त करता है?

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

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

या

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



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

काम नहीं करेगा जब Doctype html 4.01 है हालांकि ...




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




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

#content.sectionA{some rules}

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

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

यह इस तक उबाल जाता है:

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

सही बात?




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

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

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

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




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

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 से तेज़ है क्योंकि टैगनाम एक फ़िल्टरिंग चरण जोड़ता है जिसकी आपको आवश्यकता नहीं है। केवल चयनकर्ताओं में टैग नाम का प्रयोग करें जहां आपको चाहिए!




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

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



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




क्या किसी ने ऐसा कुछ सुझाया है? क्षैतिज मेनू के लिए बस एक विचार ...

एचटीएमएल का हिस्सा

<div class='list'>
  <div class='item'>
    <a>Link</a>
  </div>
  <div class='parent-background'></div>
  <!-- submenu takes this place -->
</div>

सीएसएस का हिस्सा

/* hide parent backgrounds... */
.parent-background {
  display: none; }

/* ... and show it when hover on children */
.item:hover + .parent-background {
  display: block;
  position: absolute;
  z-index: 10;
  top: 0;
  width: 100%; }

अद्यतन डेमो और शेष कोड

एक और उदाहरण टेक्स्ट-इनपुट के साथ इसका उपयोग कैसे करें - पैरेंट फ़ील्ड का चयन करें





css css-selectors