CSS क्लास चयनक

CSS में, क्लास चयनकर्ता एक बिंदु से प्रदर्शित होती है:

.center {text-align: center}

उपरोक्त उदाहरण में, सभी center क्लास वाले एचटीएमएल एलीमेंट अकेले हैं।

नीचे दिए एचटीएमएल कोड में, h1 और p एलीमेंट को center क्लास है। इसका मतलब है कि दोनों को ".center" चयनकर्ता के नियमों का पालन करना होगा。

<h1 class="center">
इस शीर्षक मध्यस्थ समायोजन के साथ होगा
</h1>
<p class="center">
इस पैराग्राफ भी मध्यस्थ समायोजन के साथ होगा。
</p>

ध्यान दें:क्लास नाम का पहला अक्षर संख्या नहीं हो सकता! यह Mozilla या Firefox में काम नहीं करता。

id के समान, class भी उद्धारण चयनकर्ता के रूप में उपयोग की जा सकती है:

.fancy td {
	color: #f60;
	background: #666;
	}

इस उदाहरण में, class नाम के बड़े एलीमेंट के भीतर के टेबल कोष्ठक हरे पृष्ठभूमि से नारंगी लिखावट दिखाएंगे।(नाम fancy के बड़े एलीमेंट एक टेबल या एक div हो सकता है)

एलीमेंट भी उनकी क्लास के आधार पर चयन किए जा सकते हैं: }}

td.fancy {
	color: #f60;
	background: #666;
	}

उपरोक्त उदाहरण में, class fancy के तालिका कोष्ठकों को ग्रे पृष्ठभूमि वाला नीला रंग का रंग रखा जाएगा。

<td class="fancy">

आप क्लास fancy को किसी भी तालिका एलीमेंट को अबार अबार आबंटित कर सकते हैं।उन तालिका को fancy नामकरण किए गए कोष्ठकों को ग्रे पृष्ठभूमि वाला नीला रंग का रंग रखा जाएगा।उन जो को fancy नामकरण की गई क्लास को नहीं आबंटित किए गए कोष्ठकों को इस नियम का प्रभाव नहीं पड़ेगा।एक और बात यह है कि class fancy के पारिवारिक कोष्ठकों को भी ग्रे पृष्ठभूमि वाला नीला रंग का रंग नहीं रखा जाएगा, बेशक, किसी भी अन्य fancy नामकरण किए गए एलीमेंट को भी इस नियम का प्रभाव नहीं पड़ेगा।यह सभी कारण इस नियम के लिखने के तरीके के कारण है, इस प्रभाव को fancy नामकरण किए गए तालिका कोष्ठकों (अर्थात td एलीमेंट को fancy क्लास को चयन करने के लिए) के भीतर सीमित किया गया है।

संबंधित सामग्री

यदि आप क्लास चयनक के बारे में अधिक जानना चाहते हैं, तो CodeW3C.com के उच्च शिक्षण को पढ़ें:CSS क्लास चयनक विस्तार。