एक pseudo-class (एकल कोलन :) तत्वहरूलाई तिनीहरूको state वा position को आधारमा चयन गर्छ — कुरा जो सादा class द्वारा व्यक्त गर्न सकिन्न, जस्तै "hover गर्दा" वा "पहिलो child।"
State pseudo-classes (interaction)
a:hover { color: blue; } /* mouse is over it */
a:focus { outline: 2px solid; } /* keyboard/tab focus — keep for accessibility! */
button:active { transform: scale(0.98); } /* while being pressed */
button:disabled { opacity: 0.5; } /* disabled form controls */
input:checked { } /* checked checkbox/radio */
input:focus-visible { } /* focus only when keyboard-navigating (not mouse) */
लिङ्कहरूको क्रम महत्त्वपूर्ण छ (LVHA): :link, :visited, :hover, :active।
Structural pseudo-classes (position)
li:first-child { } /* first li among its siblings */
li:last-child { } /* last one */
li:nth-child(2) { } /* the 2nd */
li:nth-child(odd) { } /* 1st, 3rd, 5th... — zebra striping */
li:nth-child(3n) { } /* every 3rd */
p:only-child { } /* a p that's the sole child */
:nth-child() शक्तिशाली छ — 2n (सम), 2n+1 (विषम), 3n (प्रत्येक तेस्रो), आदि।
Form & modern pseudo-classes
input:required { }
input:invalid { border-color: red; }
:is(h1, h2, h3) { } /* matches any — shortens selector lists */
.card:has(img) { } /* the "parent selector": a card that CONTAINS an img */
:not(.active) { } /* everything except .active */
Pseudo-class vs pseudo-element
Pseudo-classes एक कोलन (:hover, एक state) प्रयोग गर्छन्; pseudo-elements दुई (::before, एक generated part) प्रयोग गर्छन्। तिनीहरूलाई भ्रमित नगर्नुहोस्।
किन यो महत्त्वपूर्ण छ
Pseudo-classes ले तपाईंलाई interaction (hover/focus — usable, accessible UI को लागि आवश्यक) र structure (striping, first/last) शैली गर्न अतिरिक्त markup वा JavaScript बिना अनुमति दिन्छ।
आधुनिक (:has, :is, :focus-visible) समस्याहरू समाधान गर्छन् जसलाई पहिले JS वा repetitive selectors की आवश्यकता थियो।