पाठ 21, कुल 30 में

CSS स्यूडो-क्लास

5 मिनट पढ़ें · मुफ़्त · बिना लॉगिन

English हिंदी

कभी-कभी आप किसी element को सिर्फ एक खास स्थिति में style करना चाहते हैं: जब mouse किसी link पर हो, जब visitor किसी box में click करके टाइप कर रहा हो, सूची का पहला item हो, या table की हर दूसरी पंक्ति हो। स्यूडो-क्लास (pseudo-class) ठीक यही करता है — यह एक keyword है जिसे आप selector के बाद, एक colon (:) लगाकर जोड़ते हैं, और वह किसी खास स्थिति वाले element को चुन लेता है।

Diagram — देखें, यह सब कैसे जुड़ता है

"Pseudo" का मतलब है "असली नहीं"। स्यूडो-क्लास आपके HTML में कोई असली class नहीं है — आप इसे class attribute में कभी नहीं लिखते। यह एक शर्त है जिसे browser आपके लिए जाँचता है: क्या mouse इस समय इस link पर है? क्या यह अपने parent का पहला बच्चा है? अगर हाँ, तो style लग जाता है।

Hover और Focus — इंटरैक्टिव स्थितियाँ

:hover तब लगता है जब mouse किसी element के ऊपर हो। यह सबसे ज़्यादा इस्तेमाल होने वाला स्यूडो-क्लास है — रंग बदलने वाले links, गहरे होने वाले buttons, थोड़े से उठने वाले cards। :focus तब लगता है जब किसी element पर keyboard focus हो, जैसे वह form box जिसमें visitor ने click करके टाइप करना शुरू किया हो। :focus को हमेशा style करें: keyboard से चलने वाले और phone इस्तेमाल करने वाले लोग इसी से समझते हैं कि वे पेज पर कहाँ हैं।

a:hover {
  color: red;
}
input:focus {
  border-color: green;
  outline: none;
}

Link की स्थितियाँ — :link, :visited, :active

Link की चार स्थितियाँ होती हैं, और उनका एक मशहूर क्रम है जिसे याद रखना ज़रूरी है: LVHA — :link, :visited, :hover, :active। Visitor के एक बार click करने के बाद link :visited हो जाता है, और click करते समय के पल भर में वह :active होता है। अगर आप इन्हें गलत क्रम में लिखेंगे, तो बाद वाला नियम जीत जाएगा और एक state दूसरी को छिपा लेगी।

First-child और Last-child

:first-child वह element चुनता है जो अपने parent का पहला बच्चा हो, और :last-child आखिरी बच्चे को चुनता है। ये छोटे-छोटे कामों के लिए बहुत अच्छे हैं: सूची के पहले item को bold करें, या table की आखिरी पंक्ति से नीचे वाला border हटा दें।

li:first-child {
  font-weight: bold;
}
li:last-child {
  border-bottom: none;
}

Nth-child — सूची में पैटर्न

:nth-child() बच्चों को संख्या या पैटर्न से चुनता है। :nth-child(2) दूसरे बच्चे को चुनता है। :nth-child(even) दूसरा, चौथा और छठा चुनता है। :nth-child(odd) पहला, तीसरा और पाँचवाँ चुनता है। :nth-child(3n) हर तीसरा चुनता है। ज़ेबरा धारी वाली table के पीछे यही इंजन है — आप इसे tables वाले पाठ में इस्तेमाल कर चुके हैं, बिना इसका नाम जाने।

Not — इसके अलावा सब कुछ

:not() उल्टा काम करता है: यह उन सबको चुनता है जो मेल नहीं खाते। li:not(.topper) उस एक item को छोड़कर सूची के बाकी सभी items को style करता है जिसमें class topper है। यह "ये सब, सिवाय उसके" कहने का साफ तरीका है।

li:not(.topper) {
  color: #334155;
}

Note: :nth-child parent के सभी बच्चों को गिनता है, सिर्फ उनको नहीं जो आपके selector से मेल खाते हैं। अगर सूची में एक heading के बाद items हैं, तो li:nth-child(2) पहला list item है, क्योंकि heading बच्चा नंबर 1 है। इस पर लगभग हर कोई एक बार ज़रूर अटकता है।

Tip: Button और links पर :hover और :focus को साथ-साथ style करें। Mouse वाले को hover effect मिलेगा, keyboard वाले को focus effect, और किसी को यह अंदाज़ा नहीं लगाना पड़ेगा कि वे किस पर click करने वाले हैं।

आम गलतियाँ

Link की स्थितियों को गलत क्रम में लिखना — LVHA याद रखें: link, visited, hover, active।
Colon भूल जाना और a:hover की जगह ahover लिख देना।
यह सोचना कि :first-child का मतलब है "इस तरह का पहला" — इसका मतलब है parent का पहला बच्चा, जो भी हो। किसी तरह के पहले element के लिए :first-of-type इस्तेमाल करें।
:nth-child इस्तेमाल करके हैरान होना कि वह heading और बाकी भाई-बहनों को भी गिनता है।
:hover को खूबसूरती से style करना और :focus भूल जाना — keyboard से चलने वाले लोग देख ही नहीं पाते कि वे कहाँ हैं।

याद रखें

स्यूडो-क्लास एक colon (:) से शुरू होता है और किसी खास स्थिति वाले element को चुनता है।
:hover mouse के लिए है; :focus keyboard के लिए है — दोनों को style करें।
Link की स्थितियाँ LVHA क्रम में लिखें: link, visited, hover, active।
:first-child और :last-child सूची के सिरों को चुनते हैं; :nth-child() संख्या या पैटर्न से चुनता है।
:not() brackets के अंदर लिखी चीज़ को छोड़कर बाकी सबको चुनता है।
:nth-child सभी भाई-बहनों को गिनता है, सिर्फ मेल खाने वालों को नहीं।

याद रखने की तरकीब: LVHA — पहले लिंक, फिर विज़िटेड, फिर होवर, फिर एक्टिव — क्रम बिगड़ा तो state छिप जाएगी।

उदाहरण समझिए

a { color: #1d4ed8; } — link शुरू में नीला है, ताकि visitor समझे कि इस पर click किया जा सकता है।
a:hover { color: #e11d48; } — mouse link पर आते ही वह लाल हो जाता है, जिससे साफ दिखता है कि किस पर click होगा।
input:focus { border-color: #16a34a; outline: none; } — visitor के search box में click करते ही उसका border हरा हो जाता है, ताकि दिखे कि वह active है।
li:first-child { background-color: #dbeafe; font-weight: bold; } — सूची का पहला छात्र, टॉपर, नीले background और bold अक्षरों के साथ दिखता है।
li:nth-child(even) { background-color: #f1f5f9; } — हर सम (even) पंक्ति को हल्का grey background मिलता है, जिससे सूची में ज़ेबरा धारियाँ बनती हैं।
li:not(.topper) { color: #334155; } — टॉपर को छोड़कर सूची के बाकी सभी items को एक ही गहरा grey रंग मिलता है।

उदाहरण

Example

<!DOCTYPE html>
<html>
<head>
<title>Pseudo-classes — Student List</title>
<style>
body {
  font-family: Arial, sans-serif;
}
h1 {
  color: #1e3a5f;
}
a {
  color: #1d4ed8;
}
a:hover {
  color: #e11d48;
}
input {
  padding: 8px;
  border: 2px solid #94a3b8;
}
input:focus {
  border-color: #16a34a;
  outline: none;
}
ul {
  list-style: none;
  padding: 0;
  width: 300px;
}
li {
  padding: 10px;
}
li:first-child {
  background-color: #dbeafe;
  font-weight: bold;
}
li:nth-child(even) {
  background-color: #f1f5f9;
}
li:last-child {
  border-bottom: 2px solid #1e3a5f;
}
li:not(.topper) {
  color: #334155;
}
</style>
</head>
<body>

<h1>Class Toppers</h1>
<p><a href="#">See the full marksheet</a></p>
<p><input type="text" placeholder="Search a student..."></p>

<ul>
<li class="topper">1. Ananya — 92%</li>
<li>2. Rohit — 88%</li>
<li>3. Simran — 85%</li>
<li>4. Arjun — 82%</li>
<li>5. Meera — 79%</li>
</ul>

</body>
</html>

परिणाम

परिणाम — ब्राउज़र में यह कैसा दिखता है

खुद करके देखें — लाइव एडिटर

नीचे दिया गया कोड बदलें और चलाएँ दबाएँ — परिणाम तुरंत दिखेगा। कोई फाइल सहेजनी नहीं है, कोई लॉगिन नहीं चाहिए।

पूरे एडिटर में खोलें

परिणाम

खुद क्यों सीखें — AI से पूछने के बजाय?

AI आपके लिए कोड लिख सकता है, लेकिन वह आपके लिए सोच नहीं सकता। जब आप HTML खुद सीखते हैं, तो आपका दिमाग असली कौशल बनाता है: आप समझते हैं कि पेज ऐसा क्यों दिखता है, टूटने पर उसे ठीक कर सकते हैं, और परीक्षा या इंटरव्यू में बिना मदद के जवाब दे सकते हैं। यही कौशल नौकरी दिलाता है — कॉपी किया हुआ जवाब नहीं।