CSS चयनकर्ता और घोषणाओं को समझना

CSS चयनकर्ताओं का उपयोग किसी दिए गए पैटर्न के प्रत्येक तत्व का मिलान करके HTML तत्वों का चयन करने के लिए किया जाता है। हम चयनकर्ता के अंदर संपत्ति और उनके मूल्य की घोषणा करके शैलियों को परिभाषित करते हैं।

सिंटैक्स

शैलियों को घोषित करने का सिंटैक्स इस प्रकार है -

चयनकर्ता {संपत्ति:मूल्य; }

CSS में साधारण चयनकर्ता, विशेषता चयनकर्ता, छद्म-वर्ग, छद्म-तत्व और मानक संयोजकों के माध्यम से चयनकर्ताओं का संयोजन होता है। निम्न तालिका कुछ चयनकर्ताओं को सूचीबद्ध करती है -

चयनकर्ता	चयनकर्ता का प्रकार	विवरण
*	सार्वभौमिक चयनकर्ता	सभी तत्वों से मेल खाता है
e	टाइप चयनकर्ता	ई प्रकार के सभी तत्वों से मेल खाता है
e1e2	वंशज चयनकर्ता	किसी भी e2 तत्व से मेल खाता है जो एक e1 तत्व का वंशज है।
e1>e2	बाल चयनकर्ता	किसी भी e2 तत्व से मेल खाता है जो एक तत्व e1 का चाइल्ड है।
e[bar="demo"]	विशेषता चयनकर्ता	किसी भी ई तत्व से मेल खाता है जिसका "बार" विशेषता मान "डेमो" के बिल्कुल बराबर है।
#id	ID चयनकर्ता	"id" के बराबर ID वाले एलीमेंट से मेल खाता है।

उदाहरण

निम्नलिखित उदाहरण CSS चयनकर्ताओं को स्पष्ट करते हैं -

डेमो हेडिंग

यह हमारा डेमो टेक्स्ट है। केवल पहली पंक्ति की एक अलग शैली होगी। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है।

आउटपुट

यह निम्न आउटपुट देता है -

CSS चयनकर्ता और घोषणाओं को समझना

उदाहरण

विद्यार्थी विवरण

विद्यार्थीविवरण का उल्लेख यहां किया जाएगा। स्टूडेंट मार्क्स में जुलाई 2018 में आयोजित अंतिम सेमेस्टर में छात्रों के स्कोर शामिल हैं। इसके साथ ही रैंक भी प्रदर्शित की जाती हैं।

आउटपुट

यह निम्न आउटपुट देता है -

CSS चयनकर्ता और घोषणाओं को समझना