CSS उत्परिवर्तन चयनक

उत्परिवर्तन चयनक्रम

एलिमेंट के स्थान के संदर्भ रिश्ते के आधार पर शैली निर्धारित करके, आप टैग को और स्वच्छ बना सकते हैं।

CSS1 में, इस तरह से नियम लागू करने वाले चयनक्रम को संदर्भ चयनक्रम (contextual selectors) कहा जाता है, जो इसलिए कहलाते हैं क्योंकि वे नियम को लागू करने या रोकने के लिए संदर्भ रिश्ते पर निर्भर करते हैं। CSS2 में, इन्हें उत्परिवर्तन चयनक्रम कहा जाता है, लेकिन आप जो नाम दें, वे अभी भी एक ही काम करते हैं।

उत्परिवर्तन चयनक्रम आपको दस्तावेज़ के संदर्भ रिश्ते के आधार पर किसी टैग की शैली निर्धारित करने की अनुमति देता है। उत्परिवर्तन चयनक्रम का उपयोग करके, हम HTML को और स्वच्छ बना सकते हैं।

उदाहरण के तौर पर, आप चाहते हैं कि सूची में strong एलिमेंट इटलिक हो, नहीं कि सामान्य बोल्ड हो, इस तरह एक उत्परिवर्तन चयनक्रम डिफ़ाइन कर सकते हैं:

li strong {
    font-style: italic;
    font-weight: normal;
  }

कृपया नीचे दिए गए <strong> का नीचे दिए गए कोड का संदर्भ देखें:

<p><strong>मैं बोल्ड हूँ, नहीं इटलिक, क्योंकि मैं सूची में नहीं हूँ, इसलिए यह नियम मेरे लिए असक्रिय है</strong></p>
<ol>
<li><strong>मैं इटलिक हूँ। इसकी वजह यह है कि strong एलिमेंट li एलिमेंट के अंदर है।</strong></li>
<li>मैं सामान्य फ़ॉन्ट हूँ。</li>
</ol>

उपरोक्त उदाहरण में केवल li एलिमेंट के strong एलिमेंट का शैली इटलिक है, strong एलिमेंट के लिए विशेष class या id की आवश्यकता नहीं है, कोड और सरल है।

और नीचे दिए गए CSS नियम को देखें:

strong {
     color: red;
     }
h2 {
     color: red;
     }
h2 strong {
     color: blue;
     }

इसके प्रभाव के लिए नीचे दिए गए HTML है:

<p>इस अनुच्छेद में तीव्रता से उभारा शब्द <strong>लाल</strong> है。</p>
<h2>यह उपशीर्षक भी लाल है。</h2>
<h2>इस उपशीर्षक में तीव्रता से उभारा शब्द है<strong>blue</strong>.</h2>

संबंधित सामग्री

यदि आप उत्परिवर्तन चयनक के बारे में अधिक जानना चाहते हैं, तो कृपया CodeW3C.com के उच्च शिक्षण के नीचे दिए गए सामग्री को पढ़ें: