सीएसएस चयनकर्ता उन तत्वों का चयन करते हैं जिन पर आप शैलियों को लागू कर सकते हैं। सबसे बुनियादी चयनकर्ता तत्व चयनकर्ता है, जो किसी तत्व को उसके नाम से चुनता है। अन्य चयनकर्ताओं में आईडी, वर्ग, सार्वभौमिक और वंशज चयनकर्ता शामिल हैं।

चयनकर्ता किसी भी CSS कथन के दो भागों में से एक हैं। एक निश्चित शैली के लिए HTML पृष्ठ पर तत्वों को लक्षित करने के लिए चयनकर्ताओं का उपयोग किया जाता है।

सीएसएस चयनकर्ताओं की एक विस्तृत श्रृंखला है जिसका उपयोग वेब पेज पर तत्वों को सटीक रूप से लक्षित करने के लिए किया जा सकता है, और जब आप एक डिजाइन कर रहे हों तो आपको उच्च स्तर के अनुकूलन की अनुमति मिलती है।

यह मार्गदर्शिका CSS में चयनकर्ताओं की बुनियादी बातों का पता लगाएगी कि आप अपने कोड में सबसे अधिक उपयोग किए जाने वाले चयनकर्ताओं का लाभ कैसे उठा सकते हैं।

सीएसएस चयनकर्ता

CSS चयनकर्ता उन HTML तत्वों की पहचान करते हैं जिन पर आप CSS शैली लागू करना चाहते हैं। चयनकर्ता अपने नाम, आईडी, वर्ग और अन्य विशेषताओं के आधार पर तत्वों का चयन कर सकते हैं। CSS नियम में चयनकर्ता कोष्ठक की एक जोड़ी से पहले दिखाई देते हैं।

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

यहाँ CSS में एक नियम का उदाहरण दिया गया है:

h1 {
	color: pink;
}

यह CSS नियम वेब पेज पर सभी h1 तत्वों का रंग गुलाबी रंग में सेट करता है। हमारे नियम के दो घटक हैं:

81% प्रतिभागियों ने कहा कि बूटकैंप में भाग लेने के बाद उन्हें अपनी तकनीकी नौकरी की संभावनाओं के बारे में अधिक आत्मविश्वास महसूस हुआ। आज ही एक बूटकैंप से मिलान करें।

बूटकैंप शुरू करने से लेकर अपनी पहली नौकरी खोजने तक, औसत बूटकैंप ग्रेड ने करियर संक्रमण में छह महीने से भी कम समय बिताया।

• h1 , जो वह तत्व है जिस पर हमारी शैली लागू होती है। इसे चयनकर्ता कहा जाता है।
• रंग:गुलाबी , जो हमारे चयनकर्ता में तत्वों पर लागू शैली है। इसे घोषणा कहा जाता है। इस उदाहरण में, हम सभी h1 तत्वों का रंग बदलकर गुलाबी कर देते हैं।

CSS चयनकर्ता वेब शैलियों को डिजाइन करने का एक मूलभूत हिस्सा हैं। चयनकर्ता आपको ब्राउज़र को यह बताने की अनुमति देते हैं कि किन तत्वों को किसी विशेष शैली का उपयोग करना चाहिए। उदाहरण के लिए, आपके पास एक चयनकर्ता हो सकता है जो ब्राउज़र को सभी

. को स्टाइल करने का निर्देश देता है तत्व, या सभी

तत्व, वेब पेज पर।

CSS चयनकर्ता प्रकार

CSS चयनकर्ताओं की एक विस्तृत श्रृंखला प्रदान करता है। आइए हम उन मुख्य चयनकर्ताओं के उदाहरण का अन्वेषण करें जिनसे आप सीएसएस नियमों को डिजाइन करते समय सामना कर सकते हैं।

CSS तत्व-आधारित चयनकर्ता

तत्व-आधारित चयनकर्ता आपको एक दस्तावेज़ में एक तत्व के सभी उदाहरणों के लिए एक शैली लागू करने की अनुमति देता है जिससे एक नियम मेल खाता है। उदाहरण के लिए, आप सभी पर एक शैली लागू करने के लिए तत्व चयनकर्ता का उपयोग कर सकते हैं

एक पृष्ठ पर टैग।

मान लीजिए कि हम वेब पेज पर सभी पैराग्राफ-आधारित टेक्स्ट का रंग ग्रे में बदलना चाहते हैं। हम इस कोड का उपयोग करके ऐसा कर सकते हैं:

p {
	color: gray;
}

हमारे "पी" चयनकर्ता के अंदर की घोषणाएं प्रत्येक अनुच्छेद पर लागू होंगी (एचटीएमएल

टैग) हमारे वेब पेज पर।

सीएसएस आईडी चयनकर्ता

CSS id चयनकर्ता किसी पृष्ठ पर उसकी ID के आधार पर HTML तत्व का चयन करता है। एचटीएमएल आईडी अद्वितीय हैं इसलिए आईडी चयनकर्ता का उपयोग वेब पेज पर एक ही तत्व के लिए शैलियों को लागू करने के लिए किया जाता है। आईडी चयनकर्ता के लिए सिंटैक्स एक हैश चिह्न है जिसके बाद तत्व आईडी होता है।

मान लीजिए कि हम अपने पृष्ठ पर "बॉक्स 9" नामक तत्व की सीएसएस ऊंचाई विशेषता का मान 150px पर सेट करना चाहते हैं। हम इस कोड का उपयोग करके ऐसा कर सकते हैं:

#box9 {
	height: 150px;
}

यह नियम "box9" आईडी वाले तत्व की ऊंचाई 150px पर सेट करेगा।

CSS वर्ग चयनकर्ता

CSS वर्ग चयनकर्ता उन तत्वों को ढूंढते हैं जिनके पास एक विशेष वर्ग विशेषता है। वर्ग चयनकर्ता का सिंटैक्स एक अवधि (.) है और फिर उस वर्ग का नाम है जिसे आप चुनना चाहते हैं।

इसलिए, यदि आप "boxMiddle" वर्ग को लक्षित करना चाहते हैं, तो आप ".boxMiddle" चयनकर्ता का उपयोग करेंगे।

मान लीजिए कि हम अपने वेब पेज पर एक बॉक्स डिजाइन कर रहे हैं। बॉक्स में गुलाबी पृष्ठभूमि का रंग होना चाहिए। हमारे बॉक्स को "पिंकबॉक्स" वर्ग सौंपा गया है, जिसमें हम अपनी शैलियों को लागू कर सकते हैं। यहां वह कोड है जिसका उपयोग हम पिंकबॉक्स वर्ग वाले तत्वों के रंग को गुलाबी पर सेट करने के लिए करेंगे:

.pinkBox {
	color: pink;
}

"पिंकबॉक्स" वर्ग वाले वेब पेज पर प्रत्येक तत्व को गुलाबी रंग में सेट किया जाएगा।

इसके अलावा, आप यह भी निर्दिष्ट कर सकते हैं कि किसी विशेष वर्ग के केवल विशिष्ट तत्व ही शैली से प्रभावित होने चाहिए। केवल एक वर्ग चयनकर्ता का उपयोग करके, एक विशेष वर्ग वाला प्रत्येक तत्व आपके द्वारा परिभाषित शैली से प्रभावित होगा।

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

div.pinkBox {
	color: pink;
}

* {
	text-align: center;
}

li a {
	background-color: yellow;
}

h2 {
	text-align: center;
}

.alignCenter {
	text-align: center;
}

h2, .alignCenter {
	text-align: center;
}

h1 {
	text-align: center;
	font-size: 32px;
	font-weight: normal;
}

h2 {
	text-align: center;
	font-size: 24px;
	font-weight: normal;
}

h3 {
	text-align: center;
	font-size 18px;
	font-weight: normal;
}

h1, h2, h3 {
	text-align: center;
	font-weight: normal;
}

h1 {
	font-size: 32px;
}

h2 {
	font-size: 24px;
}

h3 {
	font-size: 18px;
}