CSS में एलिमेंट क्लासेस

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

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

आइए एक उदाहरण देखें। आइए दो प्रकार की क्लासेस - eee और zzz वाले पैराग्राफ बनाएं:

<p class="eee">
	paragraph with class eee
</p>
<p class="eee">
	paragraph with class eee
</p>
<p class="zzz">
	paragraph with class zzz
</p>
<p class="zzz">
	paragraph with class zzz
</p>

आइए अब CSS में विभिन्न क्लासेस वाले पैराग्राफ को टारगेट करें और उन्हें कुछ स्टाइल दें। उदाहरण के लिए, zzz क्लास वाले पैराग्राफ को लाल रंग में और eee क्लास वाले पैराग्राफ को हरे रंग में रंगें।

इसके लिए CSS फाइल में हमारी क्लासेस को टारगेट करना होगा। टारगेट करने का सिंटैक्स इस प्रकार है: पहले एक डॉट (बिंदु) का प्रतीक लगता है, और फिर हमारे द्वारा चुना गया क्लास नाम। यानी क्लास eee को टारगेट करने के लिए .eee लिखना होगा, और क्लास zzz के लिए - .zzz लिखना होगा।

तो, आइए वर्णित कार्य करें। अपने HTML में हमारे द्वारा परिभाषित क्लासेस के लिए CSS स्टाइल्स भी जोड़ेंगे:

.eee {
	color: green;
}
.zzz {
	color: red;
}

यदि हम अपना कोड चलाते हैं, तो परिणाम निम्नलिखित होगा:

निम्नलिखित कोड दिया गया है:

<ul>
	<li class="odd">text</li>
	<li class="eve">text</li>
	<li class="odd">text</li>
	<li class="eve">text</li>
	<li class="odd">text</li>
	<li class="eve">text</li>
</ul>

odd क्लास वाले एलिमेंट्स को लाल रंग में और eve क्लास वाले एलिमेंट्स को हरे रंग में रंगें।

निम्नलिखित कोड दिया गया है:

<h2 class="eee">Title</h2>
<p class="eee">
	paragraph
</p>
<p class="eee">
	paragraph
</p>
<p>
	paragraph without class
</p>

<ul class="eee">
	<li>text</li>
	<li>text</li>
	<li>text</li>
	<li>text</li>
	<li>text</li>
</ul>

eee क्लास वाले सभी एलिमेंट्स को लाल रंग में रंगें।

समझाएं कि पिछले कार्य में li टैग लाल रंग में क्यों रंगते हैं, हालांकि रंग देने वाली क्लास ul टैग को दी गई है।