कभी-कभी जब हम अपना CSS बनाते हैं, तो हम एक निश्चित तत्व को लक्षित करना चाहते हैं। मान लें कि हमारे पास <div> . से भरा HTML दस्तावेज़ है टैग और <span> टैग, लेकिन केवल प्रत्येक प्रकार के पहले को किसी तरह से स्टाइल करने के लिए लक्षित करना चाहता था। हम इसे :फर्स्ट-ऑफ़-टाइप स्यूडो-क्लास कह सकते हैं।
एक छद्म वर्ग एक सीएसएस चयनकर्ता के लिए विशिष्ट शैलियों को दी गई मूल शैलियों से अलग करने का एक तरीका है। यह इस बात पर निर्भर करता है कि तत्व किस स्थिति में है। इस उदाहरण में, हम पहले <div> का चयन करना चाहते हैं। और पहला <span> इसलिए हम इसे स्टाइल कर सकते हैं - कोई अन्य स्पैन या डिव का चयन नहीं किया जाएगा।
शुरू करने के लिए यहां एक उदाहरण दिया गया है:
<html>
<head>
<style>
body {
display: flex;
flex-flow: row wrap;
}
div {
height: 100px;
width: 200px;
border: 1px solid black;
margin: 20px;
padding: 20px;
}
/* First of type */
div:first-of-type {
background: purple;
color: white;
}
div span:first-of-type {
color: red;
text-decoration: underline;
background: lightblue;
}
</style>
</head>
<body>
<div>I am the first div<span> I am inside the div and the first span</span><span> I am the second span</span></div>
<div>I am the second the div<span> I am inside the div</span><span> I am the second span</span></div>
<div>I am the third div<span> I am inside the div</span><span> I am the second span</span></div>
<div>I am the fourth div<span> I am inside the div</span><span> I am the second span</span></div>
<div>I am the fifth div<span> I am inside the div</span><span> I am the second span</span></div>
<div>I am the sixth div<span> I am inside the div</span><span> I am the second span</span></div>
<div>I am the seventh div<span> I am inside the div</span><span> I am the second span</span></div>
</body>
</html>
यहां हमारे पास उन डिव के अंदर डिव और स्पैन का एक सेट है। CSS चयनकर्ता div:first-of-type केवल अपने प्रकार के पहले तत्व का चयन करता है और इसे स्टाइल करता है। div span:first-of-type प्रत्येक div में पहली अवधि का चयन करता है क्योंकि div मूल तत्व है।
div:first-of-type कहने जैसा ही होगा div:nth-child(1)
निष्कर्ष
इस लेख में हमने :फर्स्ट-ऑफ़-टाइप स्यूडो-क्लास पर एक नज़र डाली। हमने देखा कि एक छद्म वर्ग मूल रूप से केवल कुछ ऐसा है जो उस स्थिति का वर्णन करता है जिसे हम चाहते हैं कि सीएसएस चयनकर्ता जब हम इसे स्टाइल करते हैं। हमने सामान्य वाक्य रचना पर भी एक नज़र डाली। मेरा सुझाव है कि अन्य छद्म चयनकर्ताओं पर एक नज़र डालें और उन्हें भी महसूस करें!