button:hover {
background-color: green;
color: white;
}CSS Pseudo Classes in Hindi
CSS Pseudo Classes का उपयोग किसी element की विशेष state को target करने के लिए किया जाता है। ये dynamic conditions पर styling apply करने के लिए बहुत useful होती हैं।
1. :hover
जब user किसी element (जैसे button या link) पर mouse लेकर जाता है, तब :hover pseudo class trigger होती है।
2. :focus
जब कोई element (जैसे input) पर user click करता है या tab key press करता है, तब वह focus में आ जाता है और इस state को :focus handle करता है।
input:focus {
border: 2px solid blue;
outline: none;
}3. :visited
यह pseudo class उन <a> tags पर apply होती है जिन्हें user पहले visit कर चुका होता है। इससे हम visited और unvisited links को अलग-अलग style दे सकते हैं।
a:visited {
color: purple;
}4. :first-child
यह pseudo class किसी parent के पहले child element को target करती है।
ul li:first-child {
color: red;
}5. :last-child
यह parent के आखिरी child को select करती है।
ul li:last-child {
font-weight: bold;
}6. :nth-child(n)
यह एक powerful pseudo class है जो nth position के element को select करती है। even, odd या specific number का use किया जा सकता है।
tr:nth-child(even) {
background-color: #eee;
}7. :not(selector)
यह उन elements को select करता है जो दिए गए selector से match नहीं करते।
p:not(.special) {
color: gray;
}8. :checked
यह उन input elements (जैसे checkbox, radio button) को target करता है जो selected हों।
input[type="checkbox"]:checked {
accent-color: green;
}9. :disabled और :enabled
:disabled उन form elements को target करता है जो inactive हों, जबकि :enabled active elements के लिए होता है।
input:disabled {
background-color: #ccc;
cursor: not-allowed;
}Note: CSS Pseudo Classes से आप बिना JavaScript के भी interactive और responsive design बना सकते हैं। ये खासतौर पर forms, buttons, lists और links के साथ useful होती हैं।
Related Questions (FAQ in Hindi)
- CSS में Pseudo Classes और Pseudo Elements में क्या फर्क होता है?
:hoverको mobile devices पर कैसे handle किया जाता है?- क्या हम multiple pseudo classes एक ही selector पर use कर सकते हैं?
:nth-child()और:nth-of-type()में अंतर क्या है?- क्या
:checkedpseudo class केवल checkboxes के लिए है? - Pseudo classes का उपयोग accessibility बढ़ाने में कैसे होता है?
Full Example: CSS Pseudo Classes in Action
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Pseudo Classes Example</title>
<style>
* {
box-sizing: border-box;
font-family: Arial, sans-serif;
}
body {
padding: 30px;
background-color: #f9f9f9;
}
a {
color: blue;
text-decoration: none;
}
a:visited {
color: purple;
}
a:hover {
text-decoration: underline;
}
h2:first-child {
color: darkgreen;
}
form {
margin-top: 20px;
max-width: 400px;
padding: 20px;
border: 1px solid #ddd;
background-color: #fff;
border-radius: 8px;
}
input[type="text"],
input[type="email"],
input[type="submit"] {
display: block;
width: 100%;
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 4px;
}
input:focus {
border-color: #007bff;
outline: none;
}
input[type="submit"]:hover {
background-color: #28a745;
color: white;
cursor: pointer;
}
input[type="checkbox"]:checked + label {
color: green;
font-weight: bold;
}
input:disabled {
background-color: #eee;
color: #999;
}
ul li:nth-child(even) {
background-color: #f0f0f0;
}
ul {
padding-left: 20px;
}
</style>
</head>
<body>
<h2>CSS Pseudo Classes Demo</h2>
<p>Visit <a href="https://www.example.com">this link</a> to see visited style effect.</p>
<form>
<label for="name">Name:</label>
<input type="text" id="name" placeholder="Enter your name">
<label for="email">Email:</label>
<input type="email" id="email" placeholder="Enter your email">
<input type="text" value="Disabled Input" disabled>
<input type="checkbox" id="subscribe">
<label for="subscribe">Subscribe to newsletter</label>
<input type="submit" value="Submit">
</form>
<h3>List Items Example</h3>
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
<li>Fourth item</li>
<li>Fifth item</li>
</ul>
</body>
</html>Request
Introduction to Android in Hindi
Android Runtime in Hindi
Dalvik virtual machine (DVM) in Hindi
.APK File Extension in Hindi
Android Basic Building Blocks in Hindi
Android UI Components in Hindi
Android Components for Communication in Hindi
Android API Levels in Hindi
Setting Up Android Studio in Hindi
Manifest.xml, Gradle, Uses-permission and uses-sdk in Hindi
Resources & R.java, Assets, Layouts & Drawable Resources in Hindi
Android First Sample Application
Launching Emulator in Android in Hindi
Editing Emulator Setting and Shortcut in Hindi
Android Logcat Usage in Hindi
Introduction to DDMS in Hindi
Running Your App on Emulator in Hindi
Debbuging the Android app in Hindi
Activity and Activity Lifecycle in Hindi
Android Permission System in Hindi
Android Basic UI Components in Hindi
Android Event Handling in Hindi
Android Layouts in Hindi
Introduction to Menus, Types in Hindi
Advanced UI Components in Hindi
Adaper and View Holder in Hindi
Introduction to Threads in Hindi
Threads Running on UI Threads in Hindi
Worker Threads in Hindi
Handler and Runnable in Hindi
Calling Web Services in Hindi
Introduction to Broadcast Receiver in Hindi
Introduction to Notifications in Hindi
Overview and Types of Services in Hindi
Android Supported Storage in Hindi
Introduction to SQLite in Hindi
CRUD Operation in SQLite Database in Hindi
Basics of Content Provider in Hindi
