Pseudo-classes and Pseudo-elements In Hindi
एचटीएमएल वेब पेज डेवलपमेंट डिज़ाइन में पस्यूडो क्लास और पस्यूडो-एलिमेंट सीएसएस स्क्रिप्टिंग में स्पेशल वेब पेज टैग एलिमेंट टैग सलेक्टर टाइप मेथड हैं, जो एचटीएमएल वेब डेवलपर को डिजायर वेब पेज एलिमेंट्स को पर्टिकुलर जरूरत कंडीशन के आधार पर स्पेसिफिक वेब पेज कण्ट्रोल एलिमेंट को कस्टम मॉडिफिकेशन फीचर्स प्रदान करता है, जहा आप इंडिविजुअल पस्यूडो क्लास और पस्यूडो-एलिमेंट ऑब्जेक्ट को मैन्युअल रूप से स्टाइल और ऐट्रिब्यूट्स को अप्लाई कर सकते है।
So, let’s get to know css pseudo class and pseudo-element better.
Pseudo class in css.
एचटीएमएल वेब पेज में सीएसएस के माध्यम से पस्यूडो क्लास सलेक्टर का उपयोग किसी पर्टिकुलर वेब पेज टैग एलिमेंट की पर्टिकुलर कंडीशन को कण्ट्रोल और डिफाइन करने में उपयोग करते है. पस्यूडो क्लास इंडिविजुअल वेब पेज ऑब्जेक्ट को कण्ट्रोल और मैनेज करते है, वेब डेवलपर इन्हे पर्टिकुलर कंडीशन और लॉजिक के अनुसार कस्टमाइज कर सकता है।
Common pseudo-classes in CSS.
यहाँ निचे वेब विजिटर पी नाम के वेब पेज एलिमेंट पर माउस को होवर करता है, तो यह उस ऑब्जेक्ट पर होवर कलर अप्लाई करता है।
Hover pseudo class example.
p:hover {
color: yellow; /* it used to apply paragraph color when you hover on them */
}
जब वेब डेवलपर या वेब विजिटर बटन पर क्लिक करता है, तो उस बटन के बैकग्राउंड में होवर ऑरेंज कलर डिस्प्ले होता है।
Button Hover pseudo class example.
button:active {
background-color: orange; /* display button hover color when user click manually */
}
जब कोई वेब विजिटर वेब पेज एलिमेंट में किसी इनपुट फ़ील्ड को फ़ोकस करता है, तो यह सिलेक्टेड क्लास एलिमेंट पर लाइम कलर अप्लाई कर डिस्प्ले करता है।
Input pseudo class example.
input:focus {
outline: 4px lime; /* it display the lime outline on input focus element */
}
एचटीएमएल वेब पेज में वेब पेज पैरेंट एलिमेंट के पहले चाइल्ड एलिमेंट को सलेक्ट करता है।
Parent child pseudo class example.
p:second-child {
font-weight: bold; /* used to display second paragraph text bold */
color: red;
}
[n]
एचटीएमएल वेब पेज में पैरेंट क्लास के nth चाइल्ड एलिमेंट को सेलेक्ट करता है, जहाँ क्लास सिलेक्शन में n एक नंबर, यूजर डिफाइन कीवर्ड या पर्टिकुलर कस्टम फार्मूला भी हो सकता है।
n pseudo class example.
li:nth-child(3) {
font-family: arial;
color: red; /* apply the 3rd list item with red color */
}
सलेक्टर मौजूदा एचटीएमएल वेब पेज में ऐसे क्लास एलिमेंट को सलेक्ट करता है, जो की किसी पर्टिकुलर क्लास में सलेक्टर से मैच नहीं होते हैं।
Div selector example in css.
div:not(.test) {
background-color: aqua; /* it used to apply css style on all dive , it exclude only test class */
}
Pseudo-elements in CSS.
एचटीएमएल वेब पेज में पस्यूडो-एलिमेंट वेब डेवलपर को वेब पेज के किसी पर्टिकुलर एलिमेंट के स्पेसिफिक पोरशन को कस्टम स्टाइल और ऐट्रिब्यूट्स अप्लाई करने में हेल्प करते है. आप पस्यूडो-एलिमेंट का उपयोग कर वेब पेज के किसी भी एलिमेंट को कस्टम एडिट कर स्टाइल्स ऐट्रिब्यूट्स को प्रीव्यू कर पाएंगे।
css common pseudo-element type.
::before pseudo-element.
मौजूदा एचटीएमएल वेब पेज में किसी पर्टिकुलर एलिमेंट कंटेंट के पहले कस्टम इनफार्मेशन को ऐड या डिस्प्ले करता है।
Before pseudo-element example.
h2::before {
content: “This Information Add Before h2 tag “; /* it used to display some custom h2 heading text */
color: red;
}
::after pseudo-element.
एचटीएमएल वेब पेज में आफ्टर पस्यूडो-एलिमेंट आपको वेब पेज एलिमेंट के बाद में पर्टिकुलर इनफार्मेशन डिस्प्ले या ऐड करने में हेल्प करता है।
after pseudo-element example.
p::after {
content: ” (Click Explore to more)”; /* it used to add after paragraph content information */
}
::first-line pseudo-element.
मौजूदा एचटीएमएल वेब पेज में पैराग्राफ टेक्स्ट के फर्स्ट ब्लॉक की फर्स्ट लाइन को बोल्ड और रेड कलर सीएसएस स्टाइल ऐट्रिब्यूट्स को अप्लाई करता है।
::first-line pseudo-element example.
p::first-line {
font-weight: bold; /* used to display paragraph first line text bold and apply red color */
color: red;
}
::first-letter pseudo-element.
मौजूदा एचटीएमएल वेब पेज के फर्स्ट लेटर टेक्स्ट के ब्लॉक के पहले करैक्टर को स्टाइल और ऐट्रिब्यूट्स अप्लाई करता है।
::first-letter pseudo-element example.
p::first-letter {
font-size: 1.5em; /* display first character 1.5 font size */
float: left; /* display float first line character to left */
margin-right: 10px; /* add margin right with 10px */
}
Example of pseudo-classes and pseudo-elements in HTML web page.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Css Pseudo-Classes and Pseudo-Elements Script Code</title>
<style>
a {
text-decoration: auto;
color: lime;
}
a:hover {
color: pink; /* used to display link pink hover color */
}
p::first-line {
font-size:1.5em;
font-weight: bold; /* display first line of paragraph with css attributes */
}
p::before {
content: “Info -: “; /* it used to display content before paragraph */
color: red;
}
button:active {
background-color: aqua; /* used to button active color */
}
</style>
</head>
<body>
<h1>Pseudo-elements And Pseudo-class</h1>
<p>Lets Explore pseudo-elements and pseudo-classes in css.</p>
<a href=”https://vcanhelpsu.com/”>Click To Hover link</a>
<br>
<button>Lets Test</button>
</body>
</html>
Explanation of pseudo-classes and pseudo-elements
- css pseudo-classes – किसी भी एचटीएमएल वेब पेज में पर्टिकुलर एलिमेंट को पर्टिकुलर कंडीशन के आधार पर कस्टम स्टाइल और ऐट्रिब्यूट्स को अप्लाई कर सकते है, जैसे, :hover, :focus, आदि सीएसएस पस्यूडो क्लास एलिमेंट है।
- css pseudo-elements – मौजूदा एचटीएमएल वेब पेज में किसी पर्टिकुलर एलिमेंट के स्पेसिफिक पोरशन को कस्टम एडिट और स्टाइल करें। जैसे, ::before, ::first-line), आदि कस्टम सीएसएस पस्यूडो-एलिमेंट है ।
