मैं एक ऐसे तत्व का चयन कैसे करता हूं जिसमें एक निश्चित वर्ग है?

Question 1

मेरी समझ यह है कि element.classकक्षा के बाकी हिस्सों की तुलना में अलग-अलग "स्टाइलिंग" प्राप्त करने के लिए एक विशिष्ट वर्ग को निर्दिष्ट करने के लिए उपयोग करना चाहिए। यह इस बारे में कोई सवाल नहीं है कि इसका उपयोग किया जाना चाहिए या नहीं, बल्कि मैं यह समझने की कोशिश कर रहा हूं कि यह चयनकर्ता कैसे काम करने का इरादा रखता है। इंटरनेट पर एक टन के उदाहरणों को देखने से, मेरा मानना है कि वाक्यविन्यास सही है और समझ में नहीं आता कि यह काम क्यों नहीं कर रहा है।

यहाँ एक उदाहरण है:

सीएसएस:

h2 {
    color: red;
}

.myClass {
    color: green;
}

h2.myClass {
    color: blue;
}

HTML:

<h2>This header should be RED to match the h2 element selector</h2>
<div class="myClass">
    <h1>This header should be GREEN to match the class selector</h1>
    <h2>This header should be BLUE to match the element.class selector</h2>
</div>

Question 2

यह इस प्रकार होना चाहिए:

h2.myClassवर्ग के साथ h2 की तलाश करता है myClass। लेकिन आप वास्तव में h2 के लिए शैली लागू करना चाहते हैं .myClassताकि आप वंशज चयनकर्ता का उपयोग कर सकें .myClass h2।

h2 {
    color: red;
}

.myClass {
    color: green;
}

.myClass h2 {
    color: blue;
}

डेमो

यह रेफ आपको चयनकर्ताओं के बारे में कुछ बुनियादी विचार देगा और वंशज चयनकर्ताओं पर एक नज़र डालेगा

Question 3

h2.myClassके h2साथ सभी को संदर्भित करता है class="myClass"।

.myClass h2उन सभी को संदर्भित करता है h2जिनके साथ (यानी नेस्टेड इन) तत्वों के बच्चे हैं class="myClass"।

यदि आप चाहते हैं कि h2आपका HTML नीला दिखाई दे, तो CSS को निम्न में बदलें:

.myClass h2 {
    color: blue;
}

यदि आप यह देखना चाहते हैं कि h2इसके टैग के बजाय एक वर्ग द्वारा, आपको सीएसएस को छोड़ देना चाहिए जैसा कि यह है और h2HTML में एक वर्ग देना चाहिए :

<h2 class="myClass">This header should be BLUE to match the element.class selector</h2>

Question 4

इस तरह के रूप में स्टाइल स्थितियों के लिए element.class चयनकर्ता है:

<span class="large"> </span>
<p class="large"> </p>

.large {
    font-size:150%; font-weight:bold;
}

p.large {
    color:blue;
}

आपके स्पान और पी दोनों को .large से फ़ॉन्ट-आकार और फ़ॉन्ट-वज़न सौंपा जाएगा, लेकिन रंग नीला केवल p को सौंपा जाएगा।

जैसा कि अन्य लोगों ने बताया है कि आप जिस चीज के साथ काम कर रहे हैं वह वंशज चयनकर्ता हैं।

Question 5

h2.myClassकेवल उन h2तत्वों के लिए मान्य है जिन्हें कक्षा myClassसीधे सौंपी गई थी।

आप इसे इस तरह नोट करना चाहते हैं:

.myClass h2

जो उन सभी बच्चों का चयन करता है myClassजिनके पास टैग्नैम हैh2

Question 6

CSS :first-childचयनकर्ता आपको एक ऐसे तत्व को लक्षित करने की अनुमति देता है जो अपने माता-पिता के भीतर पहला बाल तत्व है।

element:first-child { style_properties }
table:first-child { style_properties }