सीएसएस प्रत्यायकर्ता रेफरेंस मैनुअल

CSS उपशिष्ट

उपशिष्ट के द्वारा एलिमेंटों के विशेष स्थितियों को परिभाषित किया जाता है।

उदाहरण में, यह इसके लिए इस्तेमाल किया जा सकता है:

  • उपयोगकर्ता जब माउस एलिमेंट पर ले जाता है तो स्टाइल सेट करें
  • सदृश्य/सदृश्य नहीं होने वाले लिंकों के लिए अलग-अलग स्टाइल सेट करें
  • एलिमेंट जब फोकस पाता है तो स्टाइल सेट करें
  • सही/असही/अनिवार्य/अनिवार्य फॉर्म एलिमेंटों के लिए स्टाइल सेट करें

इस तालिका में CSS में विभिन्न उपशिष्टों को दिखाया गया है:

उपशिष्ट उदाहरण उदाहरण वर्णन
:active a:active सक्रिय लिंक को चुनें
:any-link a:anylink आधार <a> या <area> एलिमेंटों को चुनें जो href गुण के साथ हैं।
:auto-fill input:autofill ब्राउज़र द्वारा स्वत: भरे गए <input> एलिमेंटों को चुनें।
:checked option:checked सभी चयनित <input> या <option> एलिमेंटों को मेल खाना।
:default input:default सम्बन्धित एलिमेंटों के समूह में डिफॉल्ट फॉर्म एलिमेंट को चुनें।
:defined :defined सभी निर्धारित एलिमेंटों (मानक या अनुकूलित एलिमेंट) को चुनें।
:dir() :dir(rtl) निर्दिष्ट टेक्स्ट दिशा वाले एलिमेंटों को चुनें।
:disabled option:disabled सभी निष्क्रिय एलिमेंटों को चुनें जो अक्सर फॉर्म एलिमेंटों में इस्तेमाल किए जाते हैं।
:empty div:empty चुनें सभी सह-एलिमेंटों (टेक्स्ट नोड सहित)।
:enabled input:enabled सभी सक्षम एलीमेंट को चुनें (अक्सर फॉर्म एलीमेंटों में प्रयोग)।
:first @page :first अध्याय दस्तावेज़ के पहले पृष्ठ को दर्शाता है ( @page नियम के साथ प्रयोग)।
:first-child p:first-child एक गुट बहनों में पहले चयनक के रूप में आते हुए एलीमेंट चुनें (एक गुट बहनों में)।
:first-of-type li:first-of-type एक गुट बहनों में पहले विशेष प्रकार के एलीमेंट को चुनें।
:focus select:focus फोकस पाने वाले एलीमेंट चुनें (अक्सर फॉर्म एलीमेंटों में प्रयोग)।
:focus-visible button:focus-visible फोकस पाने वाले एलीमेंट चुनें (केवल कीबोर्ड के माध्यम से फोकस करने पर फोकस स्टाइल लागू होता है)।
:focus-within form:focus-within एलीमेंट या उसके किसी भी पीछे की तरह के एलीमेंट जो फोकस पाते हैं।
:fullscreen :fullscreen पूर्ण स्क्रीन मोड में आते हुए एलीमेंट चुनें।
:has() h2:has(+p) <p> एलीमेंट के बाद आते हुए <h2> एलीमेंट को चुनें और <h2> पर शैली लगाएं।
:hover a:hover माउस लूप पर आते हुए एलीमेंट चुनें।
:in-range input:in-range विनिर्दिष्ट दायरे में आते हुए वैल्यू के <input> एलीमेंट चुनें।
:indeterminate input:indeterminate अनिश्चित स्थिति में आते हुए फॉर्म एलीमेंट चुनें।
:invalid input:invalid अनवैध फॉर्म एलीमेंट चुनें।
:is() :is(ul, ol) सभी <ul> और <ol> एलिमेंट्स चुनें।
:lang() p:lang(it) lang अटेब्यूट "it" (इतालवी) के रूप में आते हुए <p> एलीमेंट चुनें।
:last-child li:last-child अपने माता एलीमेंट के अंतिम चयनक के रूप में <li> एलीमेंट चुनें।
:last-of-type p:last-of-type अपने माता एलीमेंट के अंतिम <p> एलीमेंट के रूप में <p> एलीमेंट चुनें।
:left @page :left अध्याय दस्तावेज़ के सभी बाएँ पृष्ठ ( @page नियम के साथ प्रयोग) को दर्शाता है।
:link a:link सभी अनदेखी लिंक चुनें।
:modal :modal मोडल अवस्था में आते हुए एलीमेंट चुनें।
:not() :not(p) सभी नहीं <p> एलीमेंट के एलीमेंट चुनें।
:nth-child() p:nth-child(2) आपके माता एलीमेंट के दूसरे चयनित चयनक के रूप में <p> एलीमेंट चुनें।
:nth-last-child() p:nth-last-child(2) अपने पालने वाले एलीमेंट के अंतिम दूसरे बच्चे को चुनें。
:nth-last-of-type() p:nth-last-of-type(2) अपने पालने वाले एलीमेंट के अंतिम दूसरे बच्चे को चुनें。
:nth-of-type() p:nth-of-type(2) अपने पालने वाले एलीमेंट के दूसरे <p> एलीमेंट को चुनें。
:only-child p:only-child अपने पालने वाले एलीमेंट के एकमात्र बच्चे को चुनें。
:only-of-type p:only-of-type अपने पालने वाले एलीमेंट के एकमात्र <p> एलीमेंट को चुनें。
:optional textarea:optional required विशेषता नहीं वाले <input>、<select> या <textarea> एलीमेंट को चुनें。
:out-of-range input:out-of-range विशिष्ट दायरे से बाहर वाले इनपुट एलीमेंट को चुनें。
:placeholder-shown input:placeholder-shown सबसे अधिक प्रदर्शित प्लेसहोल्डर पाठ वाले <input> या <textarea> एलीमेंट को चुनें。
:popover-open :popover-open प्रदर्शन अवस्था में होने वाले एलीमेंट को चुनें。
:read-only input:read-only readonly विशेषता वाले इनपुट एलीमेंटों को चुनें。
:read-write input:read-write पूर्णवाक्य इनपुट एलीमेंटों को चुनें。
:required input:required required विशेषता वाले इनपुट एलीमेंटों को चुनें。
:right @page :right अखबार की सभी दायां पृष्ठों को प्रिंट करता है (अखबार के साथ @page नियम के साथ प्रयोग करें)。
:root :root दस्तावेज़ के शीर्ष एलीमेंट को चुनें。
:scope :scope चयनकर्ता के संदर्भ या दायरे के लिए एलीमेंट को चुनें。
:state() :state() विशिष्ट मनसबी स्थिति वाले मनसबी एलीमेंट को चुनें。
:target :target वर्तमान गतिविधि वाले लक्ष्य एलीमेंट को चुनें。
:user-invalid :user-invalid उपयोगकर्ता के साथ अन्तरक्रिया के बाद अवैध मूल्य वाले फॉर्म एलीमेंटों को चुनें。
:user-valid :user-valid उपयोगकर्ता के साथ अन्तरक्रिया के बाद वैध मूल्य वाले फॉर्म एलीमेंटों को चुनें。
:valid input:valid सभी वैध मूल्य वाले इनपुट एलीमेंटों को चुनें。
:visited a:विजिटेड सभी पहले से देखे गए लिंक चुनें।
:व्हेयर() :व्हेयर(ol, ul) सभी <ul> और <ol> एलिमेंट्स चुनें।