CSS क्लास सेलेक्टर विस्तृत

क्लास चयनक तत्वों से स्वतंत्र रूप से शैली निर्धारित करने की अनुमति देता है।

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

क्लास चयनक तत्वों से स्वतंत्र रूप से शैली निर्धारित करने की अनुमति देता है।

इस चयनक को अलग-अलग तरीके से इस्तेमाल किया जा सकता है, या उसे अन्य तत्वों के साथ मिलाकर इस्तेमाल किया जा सकता है।

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

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

HTML कोड को संशोधित करना

क्लास चयनक का इस्तेमाल करने से पहले, विशिष्ट दस्तावेज चिह्न को संशोधित करना आवश्यक है, ताकि क्लास चयनक सही तरीके से काम करे।

क्लास चयनक शैली को तत्व से जोड़ने के लिए, class को एक उचित मान देना आवश्यक है। नीचे दिए गए HTML कोड को देखिए:

<h1 class="important">
यह शीर्षक बहुत अहम है।
</h1>
<p class="important">
यह पैराग्राफ बहुत अहम है।
</p>

ऊपरी कोड में, दोनों तत्वों की class अहम बताई गई: पहला शीर्षक (h1 तत्व), दूसरा पैराग्राफ (p तत्व)।

Syntax

Then we use the following syntax to apply styles to these classified elements, that is, a dot (.) before the class name, then combined with the wildcard selector:

*.important {color:red;}

If you only want to select elements with the same class name, you can ignore the wildcard selector in the class selector, which has no bad effects:

.important {color:red;}

अपने आप से प्रयास करें

Combine element selector

Class selector can be used in combination with element selector.

उदाहरण के लिए, आप शायद केवल पैराग्राफ को लाल लेख का रंग देना चाहते हैं:

p.important {color:red;}

चयनकर्ता अब class एट्रिब्यूट में important के सभी p एलिमेंट को मेल खाता है, लेकिन अन्य किसी भी तरह के एलिमेंट को मेल नहीं खाता, चाहे इस class एट्रिब्यूट हो या नहीं. चयनकर्ता p.important को इस तरह से व्याख्यायित किया जाता है: "जिन एलिमेंटों के class एट्रिब्यूट में important के मान है, उन सभी पैराग्राफ ". क्योंकि h1 एलिमेंट पैराग्राफ नहीं है, इसके लिए इस नियम के चयनकर्ता से मेल नहीं खाता, इसलिए h1 एलिमेंट लाल लेख का रंग नहीं बनता.

यदि आप वास्तव में h1 एलिमेंट के लिए अलग शैली निर्धारित करना चाहते हैं, तो आपको h1.important: चयनकर्ता का उपयोग कर सकते हैं:

p.important {color:red;}
h1.important {color:blue;}

अपने आप से प्रयास करें

CSS Multi-class Selector

पिछले अध्याय में, हमने class मान में एक शब्द का शामिल होने का समाधान किया. HTML में, class मान में एक शब्द सूची हो सकती है, शब्दों के बीच स्पेस से अलग किया जा सकता है. उदाहरण के लिए, यदि आप एक विशेष एलिमेंट को both important और warning के रूप में चिह्नित करना चाहते हैं, तो इसे लिख सकते हैं:

<p class="important warning">
This paragraph is a very important warning.
</p>

ये दोनों शब्दों की क्रमिक व्यवस्था बहुत महत्वपूर्ण नहीं है, यह लिख सकते हैं warning important.

हमने सोचा है कि class रूपरेखा important के सभी एलिमेंट छड़े और class रूपरेखा warning के सभी एलिमेंट इटलिक हैं, class में both important और warning के सभी एलिमेंट एक चांदी का पृष्ठभूमि है . इसे लिख सकते हैं:

.important {font-weight:bold;}
.warning {font-style:italic;}
.important.warning {background:silver;}

अपने आप से प्रयास करें

दो वर्ग चयनकर्ताओं को जोड़कर, केवल चयन किया जा सकता हैइससे आगे इन क्लास नामों को साथ में रखा जाता हैके एलीमेंट (क्लास नाम की क्रमवारता अनिश्चित है)।

यदि एक बहुक्लास सेलेक्टर में क्लास नाम सूची में नहीं होने वाला एक क्लास नाम है, तो मेल असफल होगा।नीचे दिए गए नियम को देखें:

.important.urgent {background:silver;}

विश्वास के अनुसार, यह सेलेक्टर केवल class एट्रिब्यूट में important और urgent शब्द शामिल होने वाले p एलीमेंट को मेल खाता है।तो, यदि एक p एलीमेंट के class एट्रिब्यूट में केवल important और warning शब्द हैं, तो यह मेल नहीं खाता।हालांकि, यह निम्नलिखित एलीमेंट को मेल खाता है:

<p class="important urgent warning">
यह पैराग्राफ एक बहुत महत्वपूर्ण और तत्काल चेतावनी है。
</p>

अपने आप से प्रयास करें

महत्वपूर्ण बात:IE7 से पहले की संस्करण में, विभिन्न प्लैटफॉर्म के इंटरनेट एक्सप्लोरर को बहुक्लास सेलेक्टर को सही तरीके से हाना नहीं सकता है。