एक pseudo-class (एकल कोलन :) तत्वहरूलाई तिनीहरूको state वा position को आधारमा चयन गर्छ — कुरा जो सादा class द्वारा व्यक्त गर्न सकिन्न, जस्तै "hover गर्दा" वा "पहिलो child।"
{ : blue; }
{ : solid; }
{ : (); }
{ : ; }
{ }
{ }
लिङ्कहरूको क्रम महत्त्वपूर्ण छ (LVHA): :link, :visited, :hover, :active।
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 (प्रत्येक तेस्रो), आदि।
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-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 की आवश्यकता थियो।
विस्तृत उत्तरसहित IT अन्तर्वार्ता प्रश्नहरूको पुस्तकालय — जुनियरदेखि सिनियरसम्म।
दान गर्नुहोस्