सीएसएस डिससेंडेंट चोसिंग

वंश चयनकर्ता (descendant selector) अथवा शामिल चयनकर्ता के रूप में जाना जाता है。

उपनाम चयनकर्ता के द्वारा किसी एलिमेंट के उपनामदाता के एलिमेंट को चयन किया जा सकता है।

पाठ के आधार पर चयनकर्ता चुनना

हम उपनाम चयनकर्ता को निर्धारित कर सकते हैं ताकि कुछ दस्तावेज़ संरचना में इसके नियम कार्य करें और कुछ अन्य संरचना में नहीं करें。

उदाहरण के लिए, यदि आप केवल h1 एलिमेंट के em एलिमेंट पर शैली लागू करना चाहते हैं, तो इस तरह लिखा जा सकता है:

h1 em {color:red;}

इस नियम से h1 एलिमेंट के उपनामदाता के em एलिमेंट का लेख लाल हो जाएगा। अन्य em लेख (जैसे पैराग्राफ या ब्लॉक किताब) को इस नियम से चयनित नहीं किया जाएगा:

<h1>This is a <em>important</em> heading</h1>
<p>This is a <em>important</em> paragraph.</p>

स्वयं प्रयोग करें

स्वाभाविक है, आप h1 में पाए जाने वाले प्रत्येक em एलिमेंट पर एक class विशेषता भी लगा सकते हैं, लेकिन स्पष्ट है कि उपनाम चयनकर्ता की दक्षता अधिक बढ़ी है।

व्याकरण व्याख्या

उपनाम चयनकर्ता में, नियम के बाईं पास के चयनकर्ता एक या अधिक दूसरे चयनकर्ताओं को विभाजित करते हैं। चयनकर्ताओं के बीच का खाली जगह एक जोड़कर (combinator) है। प्रत्येक जोड़कर को '... के अन्दर ... को खोजें', '... के एक हिस्से के रूप में ...', '... के उपनामदाता के रूप में ...' के रूप में समझा जा सकता है, लेकिन चयनकर्ता को दायां से बाईं तक पढ़ना चाहिए।

तो, h1 em चयनकर्ता को 'h1 एलिमेंट के उपनामदाता का कोई भी em एलिमेंट' के रूप में समझा जा सकता है। चयनकर्ता को बाईं से दायां तक पढ़ने के लिए, नीचे दिए गए वक्तव्य को बदला जा सकता है: 'इसके अनुसार, em को शामिल करने वाले सभी h1 इसके लिए शैली लागू करेंगे।'

विशिष्ट अनुप्रयोग

उपनाम चयनकर्ता की क्षमता बहुत शक्तिशाली है। इसके साथ, HTML में असंभव होने वाले कार्यों को संभव बनाया जा सकता है。

यदि एक दस्तावेज़ है, जिसमें एक बायांवला और एक मुख्य क्षेत्र है। बायांवले का पृष्ठभूमि नीला है, मुख्य क्षेत्र का पृष्ठभूमि श्वेत है, दोनों क्षेत्रों में लिंक सूची है। सभी लिंक को नीला नहीं रखा जा सकता है, क्योंकि इससे बायांवले में नीले लिंक को नहीं देखा जा सकता है。

समाधान का तरीका उपनाम चयनकर्ता का इस्तेमाल करना है। इस मामले में, बायांवला को शामिल करने वाले div को class विशेषता को sidebar रखा जाता है, और मुख्य क्षेत्र के class विशेषता को maincontent रखा जाता है। फिर नीचे दिए गए शैली को लिखा जाता है:

div.sidebar {background:blue;}
div.maincontent {background:white;}
div.sidebar a:link {color:white;}
div.maincontent a:link {color:blue;}

डिससेंडेंट चोसिंग के बारे में एक आसानी से अवगत न होने वाला पहलू है, जो दो एलिमेंट के बीच का स्तर की अंतराल अनन्त हो सकता है।

उदाहरण में, अगर ul em लिखा जाए, तो इस ग्रामार से ul एलिमेंट से उत्पन्न सभी em एलिमेंट को चुना जाएगा, बिना कि em के निष्कर्ष लेयर गहराई की बात की जाए।

तथापि, ul em इसके सभी em एलिमेंट को चुनेगा:

<ul>
  <li>सूची आइटम 1</li>
    <ol>
      <li>सूची आइटम 1-1</li>
      <li>सूची आइटम 1-2</li>
      <li>सूची आइटम 1-3</li>
        <ol>
          <li>सूची आइटम 1-3-1</li>
          <li>सूची आइटम</li> <em>1-3-2</em></li>
          <li>सूची आइटम 1-3-3</li>
        </ol>
      </li>
      <li>सूची आइटम 1-4</li>
    </ol>
  </li>
  <li>सूची आइटम 2</li>
  <li>सूची आइटम 3</li>
</ul>

स्वयं प्रयोग करें