छद्म-वर्ग (एकल कोलन :) तत्वों को उनकी अवस्था या स्थिति के आधार पर चुनते हैं — कुछ जो साधारण वर्ग से व्यक्त नहीं किया जा सकता, जैसे "होवर करते समय" या "पहला बच्चा।"
{ : 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 */
छद्म-वर्ग एक कोलन (:hover, एक अवस्था) का उपयोग करते हैं; छद्म-तत्व दो (::before, एक उत्पन्न भाग) का उपयोग करते हैं। उन्हें भ्रमित न करें।
छद्म-वर्ग आपको इंटरएक्शन (होवर/फोकस — प्रयोग करने योग्य, सुलभ UI के लिए आवश्यक) और संरचना (पट्टियां, पहली/अंतिम) को बिना अतिरिक्त मार्कअप या JavaScript के स्टाइल करने देते हैं।
आधुनिक लोग (:has, :is, :focus-visible) उन समस्याओं को हल करते हैं जिनके लिए पहले JS या दोहराए गए सिलेक्टर्स की आवश्यकता थी।
विस्तृत उत्तरों के साथ IT इंटरव्यू प्रश्नों की एक लाइब्रेरी — जूनियर से सीनियर तक।
दान करें