सीएसएस चयनकर्ता
एक CSS चयनकर्ता उस HTML तत्व का चयन करता है जिसे आप स्टाइल करना चाहते हैं।
सीएसएस चयनकर्ता
CSS चयनकर्ताओं का उपयोग उन HTML तत्वों को "ढूंढने" (या चयन) करने के लिए किया जाता है जिन्हें आप स्टाइल करना चाहते हैं।
हम CSS चयनकर्ताओं को पाँच श्रेणियों में विभाजित कर सकते हैं:
- सरल चयनकर्ता (नाम, आईडी, वर्ग के आधार पर तत्वों का चयन करें)
- संयोजक चयनकर्ता (उनके बीच एक विशिष्ट संबंध के आधार पर तत्वों का चयन करें)
- छद्म वर्ग चयनकर्ता (एक निश्चित राज्य के आधार पर तत्वों का चयन करें)
- छद्म-तत्व चयनकर्ता (किसी तत्व का एक भाग चुनें और शैलीबद्ध करें)
- विशेषता चयनकर्ता (विशेषता या विशेषता मान के आधार पर तत्वों का चयन करें)
यह पृष्ठ सबसे बुनियादी सीएसएस चयनकर्ताओं की व्याख्या करेगा।
सीएसएस तत्व चयनकर्ता
तत्व चयनकर्ता तत्व नाम के आधार पर HTML तत्वों का चयन करता है।
उदाहरण
यहां, पृष्ठ पर सभी <p> तत्व लाल टेक्स्ट रंग के साथ केंद्र-संरेखित होंगे:
p
{
text-align: center;
color: red;
}
सीएसएस आईडी चयनकर्ता
आईडी चयनकर्ता एक विशिष्ट तत्व का चयन करने के लिए एक HTML तत्व की आईडी विशेषता का उपयोग करता है।
एक तत्व की आईडी एक पृष्ठ के भीतर अद्वितीय है, इसलिए आईडी चयनकर्ता का उपयोग एक अद्वितीय तत्व का चयन करने के लिए किया जाता है!
किसी विशिष्ट आईडी वाले तत्व का चयन करने के लिए, एक हैश (#) वर्ण लिखें, उसके बाद तत्व की आईडी लिखें।
उदाहरण
नीचे दिया गया CSS नियम id="para1" के साथ HTML तत्व पर लागू होगा:
#para1
{
text-align: center;
color: red;
}
नोट: एक आईडी नाम किसी संख्या से शुरू नहीं हो सकता है!
सीएसएस वर्ग चयनकर्ता
वर्ग चयनकर्ता एक विशिष्ट वर्ग विशेषता वाले HTML तत्वों का चयन करता है।
एक विशिष्ट वर्ग वाले तत्वों का चयन करने के लिए, एक अवधि (.) वर्ण लिखें, उसके बाद वर्ग का नाम लिखें।
उदाहरण
इस उदाहरण में वर्ग = "केंद्र" वाले सभी HTML तत्व लाल और केंद्र-संरेखित होंगे:
.center {
text-align: center;
color: red;
}
आप यह भी निर्दिष्ट कर सकते हैं कि किसी वर्ग द्वारा केवल विशिष्ट HTML तत्व प्रभावित होने चाहिए।
उदाहरण
इस उदाहरण में केवल <p> वर्ग = "केंद्र" वाले तत्व लाल और केंद्र-संरेखित होंगे:
p.center {
text-align: center;
color: red;
}
HTML तत्व एक से अधिक वर्गों को भी संदर्भित कर सकते हैं।
उदाहरण
इस उदाहरण में <p> तत्व को वर्ग = "केंद्र" और वर्ग = "बड़े" के अनुसार स्टाइल किया जाएगा:
<p class="center large">This paragraph refers to two classes.</p>
नोट: एक वर्ग का नाम किसी संख्या से शुरू नहीं हो सकता है!
सीएसएस यूनिवर्सल चयनकर्ता
सार्वभौमिक चयनकर्ता (*) पृष्ठ पर सभी HTML तत्वों का चयन करता है।
उदाहरण
नीचे दिया गया CSS नियम पृष्ठ के प्रत्येक HTML तत्व को प्रभावित करेगा:
*
{
text-align: center;
color: blue;
}
सीएसएस ग्रुपिंग चयनकर्ता
समूहीकरण चयनकर्ता समान शैली परिभाषाओं वाले सभी HTML तत्वों का चयन करता है।
निम्नलिखित CSS कोड देखें (h1, h2, और p तत्वों की शैली परिभाषाएँ समान हैं):
h1
{
text-align: center;
color: red;
}
h2
{
text-align: center;
color: red;
}
p
{
text-align: center;
color: red;
}कोड को कम करने के लिए चयनकर्ताओं को समूहित करना बेहतर होगा।
चयनकर्ताओं को समूहबद्ध करने के लिए, प्रत्येक चयनकर्ता को अल्पविराम से अलग करें।
उदाहरण
इस उदाहरण में हमने ऊपर दिए गए कोड से चयनकर्ताओं को समूहीकृत किया है:
h1, h2, p
{
text-align: center;
color: red;
}
सभी सीएसएस सरल चयनकर्ता
| Selector | Example | Example description |
|---|---|---|
| #id | #firstname | Selects the element with id="firstname" |
| .class | .intro | Selects all elements with class="intro" |
| element.class | p.intro | Selects only <p> elements with class="intro" |
| * | * | Selects all elements |
| element | p | Selects all <p> elements |
| element,element,.. | div, p | Selects all <div> elements and all <p> elements |