CSS Pseudo-classes

अपनी car चलाने की कल्पना करें। आमतौर पर, dashboard lights बंद होती हैं। लेकिन अगर आपका fuel level गिरे, तो एक छोटी low-fuel alert light automatically जल जाती है। अगर आप gas pedal दबाते हैं, तो engine revs करता है। Car अपनी बदलती state को respond कर रही है। CSS pseudo-classes वही dashboard sensors हैं। ये आपको elements को सिर्फ तभी style करने देते हैं जब वे किसी specific state में जाएँ—जैसे जब कोई user किसी button पर mouse hover करे, किसी text link को click करे, या किसी list grid में तीसरा card select करे।

In this page:

Interactive State Selectors
Structural Child Selectors
Form Validation Selectors
Negation Selector (:not)
Attribute Target से Styling

Syntax

css

selector:pseudo-class {
  property: value;
}

a:hover { }
li:first-child { }
input:focus { }

Interactive State Selectors

Interactive pseudo-classes elements को सिर्फ तभी target करते हैं जब users उनके साथ interact करते हैं, offer करते हुए: hover (mouse hover), active (click press पर), और focus (Tab key से focused या selected होने पर)।

Note: keyboard-only users के लिए अपनी site accessible रखने के लिए हमेशा अपने hover style states को focus styles के साथ जोड़ें।

Warning: अपने links की interactive pseudo-classes को सही order में लिखें: :link, :visited, :hover, :active (LVHA) ताकि वे काम करें।

उदाहरण: Interactive State Selectors

css

<style>
a:hover {
  color: red;
}
a:active {
  color: darkred;
}
a:focus {
  outline: 2px solid blue;
}
</style>
<a href="#">Hover, click, or tab to me</a>

Structural Child Selectors

Structural child selectors elements को parent element के child tree में उनकी index position के आधार पर target करते हैं, offer करते हुए: first-child (पहला item), last-child (आख़िरी item), और nth-child (specific mathematical offsets या patterns)।

Note: जल्दी readable zebra-striped tables बनाने के लिए :nth-child(even) या :nth-child(odd) इस्तेमाल करें।

Warning: nth-child selector हर child element को उसकी type चाहे जो भी हो count करता है, जो divs और paragraphs mix करने पर target errors पैदा कर सकता है।

उदाहरण: Structural child selectors

css

<style>
li:first-child {
  font-weight: bold;
}
li:last-child {
  color: red;
}
li:nth-child(even) {
  background: #eee;
}
</style>
<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
</ul>

Form Validation Selectors

Form validation pseudo-classes आपको input fields को उनकी current validation state के आधार पर dynamically style करने देते हैं, offer करते हुए: required (mandatory fields), invalid (failed pattern check), और checked (active toggles)।

Note: real-time में input formatting errors highlight करने के लिए invalid styles इस्तेमाल करें।

Warning: अगर साफ़ CSS focus rules से customize न किया जाए तो Browser default invalid borders jarring दिख सकते हैं।

उदाहरण: Form validation Selectors

css

<style>
input:required {
  border-color: orange;
}
input:invalid {
  border-color: red;
}
input:checked {
  outline: 2px solid green;
}
</style>
<input type="text" required>
<input type="checkbox" checked>

Negation Selector (:not)

Negation selector (:not) आपको उन elements को target करने देता है जो किसी specified selector rule से match नहीं करते। यह items की lists पर general styles लागू करते समय specific elements को exclude करने के लिए बेहद उपयोगी है।

Note: आख़िरी वाले को छोड़कर सभी items पर margins लागू करने के लिए :not selector इस्तेमाल करें।

Warning: कई :not selectors को एक-दूसरे के अंदर nest न करें, क्योंकि यह आपकी stylesheets को पढ़ना और maintain करना मुश्किल बना देता है।

उदाहरण: The negation Selector (:not)

css

<style>
li:not(:last-child) {
  margin-bottom: 10px;
}
</style>
<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three (no margin below)</li>
</ul>

Attribute Target से Styling

Target selector (:target) आपको अपने page पर किसी specific element को style करने देता है जब उसकी ID browser URL path में active hash symbol (#) से match करती है। यह section targets को dynamically highlight करने के लिए बेहद उपयोगी है।

Note: साफ़, interactive on-page jump links बनाने के लिए :target selector को smooth scrolling के साथ combine करें।

Warning: Target styles सिर्फ तभी activate होते हैं जब URL hash actively element की ID से match करता है।

उदाहरण: Styling by attribute Target

css

<style>
:target {
  background: yellow;
}
</style>
<a href="#section1">Jump to Section 1</a>
<div id="section1">Section 1 content</div>

Live Example

Chapter Quiz — Complete all 22 topics to unlock

0/22 topics done

Complete these topics first:

← Previous Lesson CSS Combinators Next Lesson → CSS Pseudo-elements