सीएसएस चयनक

सीएसएस चयनक

CSS चयनकर्ता “खोज” (या चुनना) के लिए उसके शैली को सेट करने के लिए उपयोग किया जाता है।

हम CSS चयनकर्ताओं को पांच श्रेणियों में वर्गीकृत कर सकते हैं:

यह पृष्ठ बुनियादी CSS चयनकर्ताओं के बारे में बताएगा。

CSS एलीमेंट सेलेक्टर

एलीमेंट सेलेक्टर HTML एलीमेंट्स के नाम के आधार पर चुनता है।

इस्टेंस

यहाँ, पृष्ठ पर सभी <p> एलीमेंट्स को केंद्रीय किया जाएगा और लाल लिखावट रंग होगा:

p {
  text-align: center;
  color: red;
}

आप खुद आजा देखें

CSS id सेलेक्टर

id सेलेक्टर id एट्रिब्यूट को वाले HTML एलीमेंट को चुनता है।

एलीमेंट का id पृष्ठ में अद्वितीय होता है, इसलिए id सेलेक्टर को एक अद्वितीय एलीमेंट को चुनने के लिए इस्तेमाल किया जाता है!

विशेष id वाले एलीमेंट्स को चुनने के लिए, एक वॉर्ड (＃) चार्जर, इसके बाद एलीमेंट के id को लिखें।

इस्टेंस

यह CSS नियम id="para1" वाले HTML एलीमेंट पर लागू होगा:

#para1 {
  text-align: center;
  color: red;
}

आप खुद आजा देखें

ध्यान:id नाम संख्या से शुरू नहीं हो सकता。

CSS क्लास सेलेक्टर

क्लास सेलेक्टर विशेष class वाले HTML एलीमेंट्स को चुनता है।

विशेष class वाले एलीमेंट्स को चुनने के लिए, एक डॉट (.) चार्जर, इसके बाद क्लास नाम लिखें।

इस्टेंस

इस उदाहरण में, सभी class="center" वाले HTML एलीमेंट्स का रंग लाल और केंद्रीय होगा:

.center {
  text-align: center;
  color: red;
}

आप खुद आजा देखें

आप यहाँ तक कि केवल विशेष HTML एलीमेंट्स को क्लास के प्रभाव से प्रभावित करना चाहते हैं तो यह निर्दिष्ट कर सकते हैं।

इस्टेंस

इस उदाहरण में, केवल class="center" वाले <p> एलीमेंट्स को केंद्रीय होगा:

p.center {
  text-align: center;
  color: red;
}

आप खुद आजा देखें

HTML एलीमेंट्स भी कई क्लासों को संदर्भित कर सकते हैं।

इस्टेंस

इस उदाहरण में, <p> एलीमेंट को class="center" और class="large" के आधार पर स्टाइल सेट किया जाएगा:

<p class="center large">इस पैराग्राफ को दो क्लासों द्वारा संदर्भित किया गया है。</p>

आप खुद आजा देखें

ध्यान:क्लास नाम संख्या से शुरू नहीं हो सकता!

CSS जनरल सेलेक्टर

जनरल सेलेक्टर (*). इसे पृष्ठ पर सभी HTML एलीमेंट्स को चुनता है।

इस्टेंस

नीचे दिए गए CSS नियम पृष्ठ पर हर HTML एलीमेंट को प्रभावित करेगा:

* {
  text-align: center;
  color: blue;
}

आप खुद आजा देखें

CSS ग्रुप सेलेक्टर

ग्रुप सेलेक्टर सभी समान स्टाइल डिफाइनिशन वाले 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;
}

आप खुद आजा देखें

सभी साधारण CSS सेलेक्टर

सेलेक्टर उदाहरण उदाहरण वर्णन
.क्लास .intro क्लास="intro" के सभी एलीमेंट्स चुनें।
#id #firstname id="firstname" के एलीमेंट चुनें।
* * सभी एलीमेंट चुनें।
एलीमेंट p सभी <p> एलीमेंट चुनें।
एलीमेंट,एलीमेंट,.. div, p सभी <div> एलीमेंट और सभी <p> एलीमेंट चुनें।

विस्तृत पढ़ना

बाहरी पुस्तकःCSS एलीमेंट सेलेक्टर

बाहरी पुस्तकःCSS सेलेक्टर ग्रुप

बाहरी पुस्तकःCSS क्लास सेलेक्टर विस्तृत

बाहरी पुस्तकःCSS ID सेलेक्टर विस्तृत

बाहरी पुस्तकःCSS एट्रिब्यूट सेलेक्टर विस्तृत

बाहरी पुस्तकःCSS चयनकारी सेलेक्टर

बाहरी पुस्तकःCSS चाइल्ड सेलेक्टर

बाहरी पुस्तकःCSS अड्जेक्ट ब्रदर सेलेक्टर