CSS चयनक समूह

चयनकर्ता समूह

यदि आप चाहते हैं कि h2 एलीमेंट और पैराग्राफ के रंग ग्रे हो, तो इस उद्देश्य को प्राप्त करने के लिए सबसे आसान तरीका निम्नलिखित व्यक्तव्य का उपयोग करना है:

h2, p {color:gray;}

h2 और p चयनकर्ताओं को नियम के बाईं ओर रखें, फिर , अलग-अलग सेपरेटर के साथ, इस प्रकार एक नियम निर्धारित करें। इसके दायाँ ओर का शैली (color:gray;) इन चयनकर्ताओं द्वारा संदर्भित एलीमेंटों पर लागू होगा। सेपरेटर को ब्राउज़र को बताता है कि नियम में दो अलग-अलग चयनकर्ताएं हैं। यदि इस सेपरेटर को नहीं रखा जाता, तो नियम का अर्थ पूरी तरह से अलग होगा। उत्तरदायी चयनकर्ताओं के लिए देखें।

किसी भी अधिकतम चयनकर्ता को एक साथ उपसमूह बनाया जा सकता है, इसके लिए कोई प्रतिबंध नहीं है।

उदाहरण के लिए, अगर आप कई एलीमेंट को ग्रे दिखाना चाहते हैं, तो इस तरह का नियम इस्तेमाल कर सकते हैं:

body, h2, p, table, th, td, pre, strong, em {color:gray;}

सुझाव:उपसमूह के माध्यम से, निर्माता कुछ प्रकार के शैली को 'संकुचित' कर सकते हैं, इस तरह विस्तृत शैली पट्टी प्राप्त की जा सकती है。

नीचे दिए गए दो समूहों के नियम समान परिणाम प्रदान करते हैं, लेकिन इसे आसानी से देखा जा सकता है कि कौन-सा लिखना आसान है:

/* no grouping */
h1 {color:blue;}
h2 {color:blue;}
h3 {color:blue;}
h4 {color:blue;}
h5 {color:blue;}
h6 {color:blue;}
/* grouping */
h1, h2, h3, h4, h5, h6 {color:blue;}

स्वयं प्रयास कीजिए

उपसमूह अनेक रोचक विकल्प प्रदान करते हैं. उदाहरण के लिए, नीचे दिए गए सभी नियम उपसमूह एक-दूसरे से समान हैं, प्रत्येक समूह केवल चयनकर्ता और घोषणा उपसमूह के विभिन्न तरीकों को प्रदर्शित करता है:

/* group 1 */
h1 {color:silver; background:white;}
h2 {color:silver; background:gray;}
h3 {color:white; background:gray;}
h4 {color:silver; background:white;}
b {color:gray; background:white;}
/* group 2 */
h1, h2, h4 {color:silver;}
h2, h3 {background:gray;}
h1, h4, b {background:white;}
h3 {color:white;}
b {color:gray;}
/* group 3 */
h1, h4 {color:silver; background:white;}
h2 {color:silver;}
h3 {color:white;}
h2, h3 {background:gray;}
b {color:gray; background:white;}

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

ध्यान दें कि ग्रुप 3 में 'घोषणा ग्रुपिंग' का उपयोग किया गया है।बाद में हम घोषणा ग्रुपिंग के बारे में बताएंगे।

विषम चयनकर्ता

CSS2 ने एक नया साधारण चयनकर्ता - विषम चयनकर्ता (universal selector) शुरू किया है, जो एक सिर्फ सितारा (asterisk) के रूप में दिखाया जाता है।यह चयनकर्ता किसी भी एलिमेंट के साथ जुड़ सकता है, जैसे कि एक विषम चयनकर्ता के रूप में।

उदाहरण में, नीचे दिए गए नियम सभी एलिमेंटों को लाल रंग में बनायेगा:

* {color:red;}

स्वयं प्रयास कीजिए

यह घोषणा एक ग्रुप चयनकर्ता के बराबर है, जो दस्तावेज़ में सभी एलिमेंटों को सूचीबद्ध करता है।एक विषम चयनकर्ता का उपयोग करके (एक सिर्फ सितारा), दस्तावेज़ में सभी एलिमेंटों के color गुण को red के रंग को निर्दिष्ट करने के लिए एक बार केवल एक बटन को दबाने की आवश्यकता है।

घोषणा ग्रुपिंग

हम न केवल चयनकर्ताओं को ग्रुप कर सकते हैं, बल्कि घोषणाओं को भी ग्रुप कर सकते हैं。

यदि आप चाहते हैं कि सभी h1 एलिमेंटों के पीछे लाल पृष्ठभूमि हो और 28 पिक्सल ऊंचे Verdana फ़ॉन्ट को नीले रंग में दिखाया जाए, तो नीचे दिए गए शैली का उपयोग करें:

h1 {font: 28px Verdana;}
h1 {color: blue;}
h1 {background: red;}

लेकिन इस तरह के काम की दक्षता नहीं अच्छी है।विशेष रूप से, जब हम एक बहुत संख्या वाले शैली वाले एलिमेंट के लिए इस तरह की एक सूची बनाते हैं, तो यह काफी मुश्किल होता है।इसके बजाय, हम घोषणाओं को एक साथ ग्रुप कर सकते हैं:

h1 {font: 28px Verdana; color: white; background: black;}

यह ऊपरी 3 पंक्तियों के स्टाइलशीट के प्रभाव से पूरी तरह से एकजुट है。

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

h1 {
  font: 28px Verdana;
  color: blue;
  background: red;
  }

स्वयं प्रयास कीजिए

क्या, ऊपरी लिखी इस रूप की लिखावट की पढ़ाई आसानी से ज्यादा है।

फिर भी, यदि दूसरा तिरंगा अनदेखा कर दिया जाए, तो यूजर एजेंट इस तरह से स्टाइलशीट को व्याख्यायित करेगा:

h1 {
  font: 28px Verdana;
  color: blue background: red;
  }

स्वयं प्रयास कीजिए

क्योंकि background color के लिए एक वैध मान नहीं है और color को केवल एक शब्दांक को निर्दिष्ट करने की अनुमति है, इसलिए यूजर एजेंट इस color घोषणा को पूरी तरह से अनदेखा कर देगा (यहाँ तक कि background: black का हिस्सा भी)。इस तरह h1 शीर्षक केवल नीले रंग में दिखायेगा, लेकिन नारंगी पृष्ठभूमि के बिना, या फिर नीले रंग का h1 की दृश्यता नहीं हो सकती है।इसके बजाय, इन शीर्षक केवल डिफ़ॉल्ट रंग (आमतौर पर श्वेत) में दिखायेगा और कोई पृष्ठभूमि रंग नहीं होगा।font: 28px Verdana घोषणा अभी भी सही तरीके से काम करती है क्योंकि वह एक तिरंगे से सही तरीके से समाप्त है।

चयनक समूह के समान, घोषणा समूह भी एक सुविधापूर्ण तरीका है, जो शैलीतालिका को छोटी बनाता है, स्पष्ट बनाता है और रखरखाव में भी आसान है।

सुझाव:नियम के अंतिम घोषणा के बाद भी सemicolon जोड़ना एक अच्छी प्रथा है।जब आप नियम में एक और घोषणा जोड़ते हैं तो आपको फिर से semicolon जोड़ने की शिकायत करनी पड़ेगी。

चयनक और घोषणा समूह का जोड़

हम चयनक समूह और घोषणा समूह को एक ही नियम में जोड़ सकते हैं, ताकि बहुत कम वाक्यों से विशाल शैली को परिभाषित किया जा सके。

सभी शीर्षक के लिए एक जटिल शैली को निम्नलिखित नियम से निर्दिष्ट किया गया है:

h1, h2, h3, h4, h5, h6 {
  color:gray;
  background: white;
  padding: 10px;
  border: 1px solid black;
  font-family: Verdana;
  }

स्वयं प्रयास कीजिए

इस नियम से सभी शीर्षक के शैली को श्वेत पृष्ठभूमि वाला ग्रे पाठ बनाया गया है, जिसमें 10 पिक्सल का अंतरी है और 1 पिक्सल का ठोस किनारा है, पाठ फ़ॉन्ट वर्डाना है。