सीएसएस छद्म वर्गों के साथ काम करना

<घंटा/>

हम सीएसएस छद्म वर्गों का उपयोग करके HTML में मौजूदा तत्वों में विशिष्ट शैलियों को जोड़ सकते हैं जो एक विशिष्ट स्थिति वाले तत्व का चयन करते हैं जैसे (होवर, विज़िट, अक्षम, आदि)

नोट - CSS3 में, छद्म तत्वों से CSS Pseudo Classes को अलग करने के लिए, छद्म वर्ग सिंगल-कोलन नोटेशन का उपयोग करते हैं।

सिंटैक्स

एक तत्व पर सीएसएस छद्म वर्गों का उपयोग करने के लिए वाक्य रचना निम्नलिखित है -

Selector:pseudo-class {
   css-property: /*value*/;
}

निम्नलिखित सभी उपलब्ध सीएसएस छद्म वर्ग हैं -

<टेबल> <थेड> क्रमांक <थ> छद्म-वर्ग और विवरण 1 सक्रिय
यह सक्रिय उल्लिखित तत्व का चयन करता है
2 चेक किया गया
यह प्रत्येक चेक किए गए उल्लिखित तत्व का चयन करता है
3 अक्षम
यह प्रत्येक अक्षम उल्लिखित तत्व का चयन करता है
4 खाली
यह प्रत्येक उल्लिखित तत्व का चयन करता है जिसमें कोई संतान नहीं है
5 सक्षम
यह प्रत्येक सक्षम उल्लिखित तत्व का चयन करता है
6 पहला बच्चा
यह प्रत्येक उल्लिखित तत्व का चयन करता है जो अपने माता-पिता की पहली संतान है
7 प्रथम प्रकार
यह हर उस तत्व का चयन करता है जो उसके माता-पिता का पहला उल्लेखित तत्व है
8 फ़ोकस
यह उल्लिखित तत्व का चयन करता है जिसमें फोकस है
9 होवर करें
यह माउस पर उल्लिखित तत्वों का चयन करता है
10 इन-रेंज
यह निर्दिष्ट सीमा के भीतर मान के साथ उल्लिखित तत्वों का चयन करता है
11 अमान्य
यह सभी उल्लिखित तत्वों को अमान्य मान के साथ चुनता है
12 लैंग(भाषा)
यह "भाषा" से शुरू होने वाले लैंग विशेषता मान वाले प्रत्येक उल्लिखित तत्व का चयन करता है
13 आखिरी संतान
यह प्रत्येक उल्लिखित तत्व का चयन करता है जो अपने माता-पिता की अंतिम संतान है
14 आखिरी प्रकार
यह हर उस तत्व का चयन करता है जो उसके माता-पिता का अंतिम उल्लेखित तत्व है
15 लिंक
यह सभी अनदेखी तत्वों का चयन करता है
16 नहीं(चयनकर्ता)
यह हर उस तत्व का चयन करता है जो उल्लिखित तत्व नहीं है
17 nth-child(n)
यह प्रत्येक उल्लिखित तत्व का चयन करता है जो अपने माता-पिता का nth चाइल्ड है
18 nth-last-child(n)
यह प्रत्येक उल्लिखित तत्व का चयन करता है जो कि उसके माता-पिता का nth बच्चा है, अंतिम बच्चे से गिना जाता है
19 nth-last-oftype(n)
यह प्रत्येक उल्लिखित तत्व का चयन करता है जो कि उसके माता-पिता का nवां उल्लेखित तत्व है, जो अंतिम बच्चे से गिना जाता है
20 nth-of-type(n)
यह प्रत्येक उल्लिखित तत्व का चयन करता है जो कि इसके मूल तत्व का nवां उल्लेखित तत्व है
21 केवल-प्रकार का
यह प्रत्येक उल्लिखित तत्व का चयन करता है जो इसके माता-पिता का एकमात्र उल्लिखित तत्व है
22 एकमात्र संतान
यह प्रत्येक उल्लिखित तत्व का चयन करता है जो अपने माता-पिता की एकमात्र संतान है
23 वैकल्पिक
यह बिना "आवश्यक" विशेषता वाले उल्लेखित तत्वों का चयन करता है
24 सीमा से बाहर
यह निर्दिष्ट सीमा के बाहर के मान के साथ उल्लिखित तत्वों का चयन करता है
25 केवल पढ़ने के लिए
यह निर्दिष्ट "केवल पढ़ने योग्य" विशेषता के साथ उल्लिखित तत्वों का चयन करता है
26 पढ़ें-लिखें
यह उल्लेखित तत्वों का चयन करता है जिनमें "केवल पढ़ने के लिए" विशेषता नहीं है
27 आवश्यक
यह निर्दिष्ट "आवश्यक" विशेषता के साथ उल्लिखित तत्वों का चयन करता है
28 रूट
यह दस्तावेज़ के मूल तत्व का चयन करता है
29 लक्ष्य
यह वर्तमान सक्रिय उल्लिखित तत्व का चयन करता है (उस एंकर नाम वाले यूआरएल पर क्लिक किया गया)
30 वैध
यह सभी उल्लिखित तत्वों को मान्य मान के साथ चुनता है
31 विज़िट किया
यह सभी विज़िट किए गए उल्लिखित तत्वों का चयन करता है

उदाहरण

आइए CSS Pseudo Class का एक उदाहरण देखें -

<!DOCTYPE html>
<html>
<head>
<title>CSS Anchor Pseudo Classes</title>
</head>
<style>
div {
   color: #000;
   padding:20px;
   background-image: linear-gradient(135deg, grey 0%, white 100%);
   text-align: center;
}
.anchor {
   color: #FF8A00;
}
.anchor:last-child {
   color: #03A9F4;
}
.anchor:visited {
   color: #FEDC11;
}
.anchor:hover {
   color: #C303C3;
}
.anchor:active {
   color: #4CAF50;
}
</style>
<body>
<div>
<h1>Search Engines</h1>
<a class="anchor" href="https://www.google.com" target="_blank">Go To Google</a>
<a class="anchor" href="https://www.bing.com" target="_blank">Go To Bing</a>
</div>
</body>
</html>

आउटपुट

यह निम्नलिखित आउटपुट देगा -

सीएसएस छद्म वर्गों के साथ काम करना

उदाहरण

आइए CSS Pseudo Class का एक और उदाहरण देखें -

<!DOCTYPE html>
<html>
<head>
<title>CSS Pseudo Classes</title>
<style>
form {
   width:70%;
   margin: 0 auto;
   text-align: center;
}
* {
   padding: 2px;
   margin:5px;
   box-sizing: border-box;
}
.child{
   display: inline-block;
   height: 40px;
   width: 40px;
   color: white;
   border: 4px solid black;
}
.child:nth-of-type(1){
   background-color: #FF8A00;
}
.child:nth-of-type(2){
   background-color: #F44336;
}
.child:nth-of-type(3){
   background-color: #C303C3;
}
.child:nth-of-type(4){
   background-color: #4CAF50;
}
.child:nth-of-type(5){
   background-color: #03A9F4;
}
.child:nth-of-type(6){
   background-color: #FEDC11;
}
.child:hover{
   background-color: #000;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>CSS-Pseudo-Classes</legend>
<div id="container">
<div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div>
</div><br>
</body>
</html>

आउटपुट

यह निम्नलिखित आउटपुट देगा -

जब डिव तत्वों पर मँडरा न हो -

सीएसएस छद्म वर्गों के साथ काम करना

डिव तत्वों पर मँडराते समय -

सीएसएस छद्म वर्गों के साथ काम करना