CSS छद्म-वर्ग और छद्म-तत्वों के साथ शुरुआत करना

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

छद्म वर्ग एक तत्व के विभिन्न राज्यों को लक्षित करते हैं: जब सूचक एक लिंक पर होवर करता है, उदाहरण के लिए। छद्म तत्व आपको किसी तत्व के विशिष्ट भाग को लक्षित करने की अनुमति देते हैं, जैसे कि अनुच्छेद की पहली पंक्ति।

तो, बिना किसी और हलचल के, आइए छद्म वर्गों और छद्म तत्वों की मूल बातें समझाते हैं।

एक छद्म वर्ग क्या है?

एक छद्म वर्ग एक सीएसएस चयनकर्ता है जो एक विशिष्ट स्थिति में HTML तत्वों का चयन करता है। कुछ राज्य संदर्भ को संदर्भित करते हैं, जैसे कि इसके प्रकार का पहला तत्व। अन्य व्यवहारिक होते हैं, जैसे कि जब माउस पॉइंटर द्वारा किसी लिंक को मँडराया जा रहा हो। वे आपको उपयोगकर्ता के कार्यों के आधार पर सामग्री को स्टाइल करने की अनुमति देते हैं। प्रासंगिक स्थितियाँ, विशेष रूप से, आपको लचीला, बनाए रखने योग्य और स्वच्छ कोड लिखने में मदद करती हैं। व्यवहारिक अवस्थाएँ कार्यक्षमता के लिए एक शॉर्टकट प्रदान करती हैं जिसके लिए आपको अन्यथा जावास्क्रिप्ट का उपयोग करना पड़ सकता है।

आप आसानी से छद्म वर्गों को पहचान सकते हैं क्योंकि वे एक कोलन ( : ) से शुरू होते हैं। आइए सरल और उपयोगकर्ता-क्रिया छद्म-वर्गों के कुछ उदाहरण देखें।

सरल छद्म वर्ग उदाहरण

सबसे पहले, चलिए HTML कोड लिखते हैं।

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Pseudo-class and Pseudo-element</title>
</head>
<body>
<header>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</header>

<section>
<p>
Voluptatum fuga, impedit sequi totam numquam assumenda repellat
tempora sapiente! Nihil unde vel recusandae, expedita aperiam tempora
totam deserunt non porro reprehenderit.
</p>

<p>
Dicta totam non iusto labore sapiente numquam hic tempora earum,
minima repellendus pariatur fugit nobis ex adipisci, tempore vitae
laboriosam harum. Quidem!
</p>

<p>
Suscipit repellendus cupiditate dignissimos eveniet beatae quas
laudantium, laboriosam minus iusto, corporis ullam alias porro sequi
necessitatibus autem ipsam debitis libero sapiente!
</p>

<p>
Iste iure deserunt vel? Nisi omnis quo quibusdam inventore delectus.
Molestias exercitationem in quia possimus consectetur dolorum sequi
veniam quo corporis ullam?
</p>

<p>
Suscipit repellendus cupiditate dignissimos eveniet beatae quas
laudantium, laboriosam minus iusto, corporis ullam alias porro sequi
necessitatibus autem ipsam debitis libero sapiente!
</p>

<p>
Iste iure deserunt vel? Nisi omnis quo quibusdam inventore delectus.
Molestias exercitationem in quia possimus consectetur dolorum sequi
veniam quo corporis ullam?
</p>

<p>
Asperiores illum beatae dolores, dolore quae exercitationem laudantium,
officia nam distinctio tempora deleniti itaque quibusdam iste quo eaque
reiciendis nostrum saepe aperiam?
</p>

</section>
</body>
</html>

ध्यान दें कि एक ही खंड में कई अनुच्छेद हैं। उन्हें व्यक्तिगत रूप से स्टाइल करने के लिए, आप प्रत्येक को एक अलग वर्ग दे सकते हैं और CSS वर्ग चयनकर्ता का उपयोग कर सकते हैं। लेकिन यह बहुत व्यावहारिक नहीं है, खासकर अगर सामग्री बार-बार बदल सकती है। इसके बजाय, आप छद्म वर्गों का उपयोग कर सकते हैं जो HTML में मौजूद नहीं हैं लेकिन फिर भी आपको तत्वों को लक्षित और स्टाइल करने की अनुमति देते हैं। आइए देखें कि यह कैसे काम करता है:

सीएसएस

 body {
font-size: 1em;
}
header {
font-size: 3em;
}

/* Selecting the first paragraph */
p:first-child {
font-size: 1.3em;
}

/* Selecting the last paragraph */
p:last-child {
color: red;
text-decoration: underline;
}

/* Selecting the nth paragraph */
p:nth-child(3) {
color: blue;
font-style: italic;
}
p:nth-child(4) {
color: #666;
font-size: 1.9em;
}
p:nth-child(5) {
color: yellowgreen;
font-weight: bold;
}

आउटपुट:

सरल छद्म वर्गों जैसे :first-child , :nth-child(x) , और, :last-child का उपयोग करके हम आसानी से पैराग्राफ का चयन और स्टाइल कर सकते हैं। ध्यान दें कि ये छद्म वर्ग अनुच्छेदों का चयन स्वयं करते हैं, न कि उनके बाल तत्व।

उपयोगकर्ता-क्रिया छद्म-वर्ग उदाहरण

उपयोगकर्ता-क्रिया या व्यवहार छद्म-वर्ग केवल तभी लागू होते हैं जब उपयोगकर्ता दस्तावेज़ के साथ इंटरैक्ट करता है। सबसे लोकप्रिय उदाहरणों में से एक में शामिल हैं :link , :visited :hover , और :focus States। आइए एक लिंक और एक छवि के लिए :hover स्थिति उदाहरण देखें।

एचटीएमएल

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Pseudo-class and Pseudo-element</title>
</head>
<body>
<div class="image-box">
<img class="image-back" src="images/By_Unsplash_Search.jpg" alt="Coding on a laptop" />
<img class="img-front" src="images/By_Unsplash.jpg" alt="Search bar with blue background" />
</div>
<div>
<a href="#">Learn more about Pseudo-classes</a>
</div>
</body>
</html>

इस उदाहरण में, दो चित्र और एक लिंक है। छवियों को एक ही स्थान पर रखा गया है, इसलिए आप एक को छिपाकर और दूसरे को दिखाकर उन्हें स्विच कर सकते हैं।

सीएसएस

 body {
font-family: 'Inter', sans-serif;
}
.image-box {
position: relative;
width: 70%;
margin: 5em;
color: #fff;
}
.image-box img {
display: inline-block;
position: absolute;
left: 0;
width: 70%;
}
.image-box img.img-front:hover{
opacity:0;
cursor: pointer;
}
a {
position: absolute;
bottom: 2em;
left: 3em;
text-decoration: none;
color: #222;
display: inline-block;
font-size: 2.5em;
font-weight: 600;
border-bottom: 5px solid rgb(250, 0, 0);
}
a:hover {
color: rgb(250, 0, 0);
border-bottom: none;
}

यह पहला उदाहरण लिंक पर होवर करने के प्रभाव को दर्शाता है। CSS अपना रंग और बॉर्डर बदलता है:

इस दूसरे उदाहरण में, आप छवि पर मँडराने का प्रभाव देख सकते हैं। इसकी अस्पष्टता 0 पर सेट है जो छवि को प्रभावी ढंग से पारदर्शी बनाती है।

एक छद्म तत्व क्या है?

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

एचटीएमएल

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Pseudo-class and Pseudo-element</title>
</head>
<body>
<header>
<div class="header-img">
<img src="By_Unsplash.jpg" alt="Coding on a laptop" />
</div>
</header>
</body>
</html>

अब, हम जोड़ने के लिए पाठ में अधिक जानें छद्म तत्व से पहले एक का उपयोग करेंगे :: और एक :: छद्म तत्व के बाद पाठ अब खरीदें जोड़ने के लिए, केवल सीएसएस का उपयोग कर। हम इन छद्म तत्वों को पैरेंट कंटेनर के सापेक्ष रखने के लिए स्थिति संपत्ति भी लागू करेंगे।

 body {
font-family: 'Inter', sans-serif;
color: #666;
}
img {
width: 30em;
vertical-align: middle;
}
.header-img::before {
content: "Learn More";
color: #fff;
background-color: rgb(75, 159, 192);
padding: 0.3em 5em;
display: inline-block;
position: absolute;
top: 25px;
left: -70px;
transform: rotate(-45deg);
}
.header-img::after {
content: "Buy Now";
color: #fff;
background-color: rgb(212, 115, 91);
padding: 0.3em 5em;
display: inline-block;
position: absolute;
bottom: 25px;
right: -70px;
transform: rotate(-45deg);
}
header {
position: relative;
overflow: hidden;
font-weight: 600;
}
header,
section {
width: 30em;
}

अंतिम प्रभाव छवि के ऊपर-बाएँ और नीचे-दाएँ पर 'रिबन' जैसे लेबल को ओवरले करता है:

छद्म वर्गों और छद्म तत्वों पर अपना हाथ प्राप्त करें

CSS छद्म-वर्ग और छद्म-तत्व, जब ठीक से उपयोग किए जाते हैं, तो कई संभावनाओं के द्वार खुलते हैं। आप पहली बार में अभिभूत महसूस कर सकते हैं, लेकिन इस तकनीक का अभ्यास करना आपके वेब डिज़ाइन कौशल को बेहतर बनाने की कुंजी है। Google Chrome के DevTools जैसी सुविधाओं का उपयोग करते हुए, हमेशा अपने डिज़ाइनों का अच्छी तरह से परीक्षण करना महत्वपूर्ण है।

हमें उम्मीद है कि आपने छद्म वर्गों और छद्म तत्वों की मूल बातें सीख ली हैं। याद रखें कि सीखना कभी नहीं रुकता! इसलिए, नए CSS चयनकर्ताओं की खोज जारी रखें और अपने आगामी प्रोजेक्ट में उन्हें लागू करने और उनका परीक्षण करने का प्रयास करें।