Pseudo-classes in Hindi
- Siddharth Sharma
- Mar 3, 2025
- 4 min read
1. Definition (परिभाषा)
Pseudo-classes CSS selectors में जोड़े गए keywords होते हैं जो selected element(s) की एक विशेष state (स्थिति) को specify करते हैं।
ये आपको elements को उनकी state, position, या अन्य elements के साथ relationship के आधार पर style करने की अनुमति देते हैं, जो simple selectors के साथ संभव नहीं है।
2. Syntax (वाक्य रचना)
Pseudo-classes को colon (:) के साथ prefix किया जाता है।
सामान्य syntax:
css
selector:pseudo-class {
property: value;
}
उदाहरण:
css
a:hover {
color: red;
}
3. Common Pseudo-classes (सामान्य Pseudo-classes)
State-based Pseudo-classes (स्थिति-आधारित Pseudo-classes):
:hover - जब user किसी element पर hover करता है तो apply होता है।
:active - जब element activate हो रहा हो (जैसे क्लिक करने पर)।
:focus - जब element को focus मिलता है (जैसे input fields में)।
:visited - visited links (जिन्हें पहले visit किया गया हो) पर apply होता है।
:link - unvisited links पर apply होता है।
Structural Pseudo-classes (संरचनात्मक Pseudo-classes):
:first-child - Parent element के पहले child को select करता है।
:last-child - Parent element के अंतिम child को select करता है।
:nth-child(n) - Parent element के nth child को select करता है (जैसे :nth-child(2) दूसरे child के लिए)।
:nth-of-type(n) - Parent element के अंदर nth type के element को select करता है।
:not(selector) - दिए गए selector से match नहीं करने वाले elements को select करता है।
Form-related Pseudo-classes (फॉर्म-संबंधित Pseudo-classes):
:checked - Checked radio buttons या checkboxes पर apply होता है।
:disabled - Disabled form elements पर apply होता है।
:enabled - Enabled form elements पर apply होता है।
:valid - Valid input वाले form elements पर apply होता है।
:invalid - Invalid input वाले form elements पर apply होता है।
Other Pseudo-classes (अन्य Pseudo-classes):
:root - Document के root element को select करता है (आमतौर पर <html>)।
:empty - ऐसे elements को select करता है जिनमें कोई children या text content नहीं होता है।
:target - URL के fragment identifier से match करने वाले ID वाले element को select करता है।
4. Usage Examples (उपयोग के उदाहरण)
Hover Effect (होवर प्रभाव):
css
button:hover {
background-color: blue;
}
First Child Styling (पहले child को style करना):
css
li:first-child {
font-weight: bold;
}
Alternate Row Colors in a Table (टेबल में alternate rows को रंग देना):
css
tr:nth-child(odd) {
background-color: #f2f2f2;
}
Styling Valid and Invalid Inputs (Valid और Invalid inputs को style करना):
css
input:valid {
border-color: green;
}
input:invalid {
border-color: red;
}
5. Combining Pseudo-classes (Pseudo-classes को combine करना)
Pseudo-classes को और specific targeting के लिए combine किया जा सकता है।
उदाहरण:
css
a:hover:focus {
color: purple;
}
6. Pseudo-classes vs Pseudo-elements (Pseudo-classes और Pseudo-elements में अंतर)
Pseudo-classes elements की specific states या positions को target करते हैं।
Pseudo-elements (जैसे ::before, ::after) elements के specific parts को target करते हैं या content generate करते हैं।
Conclusion (निष्कर्ष)
· Pseudo-classes CSS में एक शक्तिशाली tool हैं जो elements को उनकी state, position, या अन्य elements के साथ relationship के आधार पर style करने की अनुमति देते हैं।
· ये JavaScript की आवश्यकता के बिना dynamic और interactive styling को enable करते हैं।
Here’s an example of using pseudo-classes in CSS with an HTML structure:
HTML Code:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pseudo-class Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Pseudo-class Example</h1>
<ul>
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
<li>Fourth Item</li>
</ul>
<a href="#">Click Me</a>
<input type="text" placeholder="Enter your name">
</body>
</html>
CSS Code (styles.css):
css
/* Style the first list item */
li:first-child {
color: red;
font-weight: bold;
}
/* Style every odd list item */
li:nth-child(odd) {
background-color: #f2f2f2;
}
/* Change link color on hover */
a:hover {
color: green;
text-decoration: underline;
}
/* Style the input when it is focused */
input:focus {
border: 2px solid blue;
outline: none;
padding: 5px;
}
Explanation (व्याख्या):
1. li:first-child:
o पहले <li> element को target करता है और उसके text को red और bold बनाता है।
2. li:nth-child(odd):
o हर odd-numbered <li> element पर light gray background apply करता है।
3. a:hover:
o Link का color green करता है और underline करता है जब user उस पर hover करता है।
4. input:focus:
o Input field को focus होने पर blue border और padding add करता है।
Output (आउटपुट):
· पहला list item red और bold होगा।
· हर odd list item का background light gray होगा।
· Link hover करने पर green और underline होगा।
· Input field focus होने पर blue border और padding दिखेगा।
यह उदाहरण दिखाता है कि कैसे pseudo-classes elements को उनकी state या position के आधार पर dynamically style कर सकते हैं।
Comments