CSS चाइल्ड सेलेक्टर

पीछे चयनकर्ता (Descendant selectors) की तुलना में, उप-एलिमेंट चयनकर्ता (Child selectors) केवल किसी एलिमेंट के उप-एलिमेंट को चुन सकते हैं。

उप-एलिमेंट चयन

यदि आप राशि को कम करना चाहते हैं और केवल किसी एलिमेंट के उप-एलिमेंट को चुनना चाहते हैं, तो उप-एलिमेंट चयनकर्ता (Child selector) का उपयोग करें。

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

h1 > gामा {color:red;}

यह नियम पहले h1 के नीचे दो गामा एलिमेंट को लाल रंग में बदलेगा, लेकिन दूसरे h1 में gामा नहीं प्रभावित होगा:

<h1>यह <strong>बहुत</strong> <strong>बहुत</strong> महत्वपूर्ण है.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>

अपने आप प्रयास करें

ग्रामार व्याख्या

आपने ध्यान दिया होगा कि चाइल्ड सेलेक्टर में बड़ा तिरंगा (चाइल्ड कनेक्टर) उपयोग किया गया है。

चाइल्ड कनेक्टर के दोनों ओर खाली जगह हो सकती है, यह वैकल्पिक है।इसलिए, निम्नलिखित लिखने का कोई परिणाम नहीं होता:

h1 > strong
h1> strong
h1 >strong
h1>strong

दायं से बाईं की ओर पढ़ने पर, सेलेक्टर h1 > strong को 'h1 एलिमेंट के उपांगिक सभी strong एलिमेंट को चुनेगा' के रूप में समझा जा सकता है。

डिससेंडेंट और चाइल्ड सेलेक्टर का संयोजन

इसको देखें:

table.company td > p

ऊपरी सेलेक्टर टेबल एलिमेंट के उपांगिक एलिमेंट के सभी p एलिमेंट को चुनेगा, जो टेबल एलिमेंट से विरासत प्राप्त करता है, जिसके एक class एट्रिब्यूट है कि उसमें 'company' है。