हर सामान्य CSS सेलेक्टर, परिवार के अनुसार समूहबद्ध: बुनियादी, कॉम्बिनेटर, सूडो-क्लास, सूडो-एलिमेंट और एट्रिब्यूट सेलेक्टर। हर पंक्ति सेलेक्टर के साथ एक-पंक्ति का उदाहरण जोड़ती है।
सेलेक्टर वे एलिमेंट चुनता है जिन पर एक नियम लागू होता है। जब कई नियम मैच करें तो स्पेसिफिसिटी तय करती है कौन जीतता है: inline, id को हराता है; id, class को हराता है; class, type को हराता है। सेलेक्टर को दाएँ से बाएँ पढ़ें: ब्राउज़र पहले सबसे दाहिने हिस्से से मैच करता है, फिर कॉम्बिनेटर के साथ ऊपर चढ़ता है। नीचे दिए परिवार लगभग वह सब कवर करते हैं जो आप लिखेंगे।
संदर्भ तालिका · 53 प्रविष्टियाँ
CSS सेलेक्टरExplained
53 of 53 rows
बुनियादी
उस टैग का हर एलिमेंट।
button { }
जिन एलिमेंट पर वह क्लास है।
.active { }
उस id वाला एकमात्र एलिमेंट।
#header { }
हर एलिमेंट।
* { box-sizing: border-box; }
डॉक्युमेंट की जड़; ग्लोबल कस्टम प्रॉपर्टी के लिए सामान्य जगह।
:root { --gap: 1rem; }
A या B से मैच होने वाले एलिमेंट (ग्रुपिंग)।
h1, h2, h3 { }
कॉम्बिनेटर
A का कोई भी descendant B।
nav a { }
B जो A का सीधा child है।
ul > li { }
B जो A के तुरंत बाद में है, एक ही parent।
h1 + p { }
हर B जो A के बाद आता है, एक ही parent।
h1 ~ p { }
सूडो-क्लास (स्थिति)
वह एलिमेंट जब पॉइंटर उसके ऊपर हो।
a:hover { }
वह एलिमेंट जिस पर कीबोर्ड फ़ोकस है।
input:focus { }
ऐसा एलिमेंट जो अपने parent का पहला child है।
li:first-child { }
nवाँ child; 2n जैसी फ़ॉर्मूला लेता है।
tr:nth-child(2n) { }
ऐसे एलिमेंट जो किसी भी भीतरी सेलेक्टर से मैच नहीं करते; Selectors 4 से सूची लेता है।
li:not(:first-child, .skip) { }
चेक किया हुआ चेकबॉक्स, रेडियो या ऑप्शन।
input:checked { }
Disabled इनपुट या बटन।
button:disabled { }
ऐसा parent जिसमें भीतरी सेलेक्टर का कोई मैच शामिल है।
li:has(ul) { }
सूची का कोई भी सेलेक्टर; स्पेसिफिसिटी सूची में सबसे ऊँची होती है।
:is(ol, ul) li { }
:is() जैसा ही, पर स्पेसिफिसिटी शून्य।
:where(ol, ul) li { }
फ़ोकस जिसे ring दिखानी चाहिए, आम तौर पर कीबोर्ड से।
a:focus-visible { }
ऐसा एलिमेंट जिस पर खुद या उसके किसी descendant पर फ़ोकस है।
form:focus-within { }
ऐसा एलिमेंट जो अपने parent का आख़िरी child है।
li:last-child { }
बिना कोई sibling वाला एलिमेंट।
p:only-child { }
उसी टैग का nवाँ sibling; 2n जैसी फ़ॉर्मूला लेता है।
p:nth-of-type(2n) { }
उसी टैग का पहला या आख़िरी sibling।
p:first-of-type { }
बिना children और बिना टेक्स्ट वाला एलिमेंट।
td:empty { }
न देखे गए लिंक और पहले से देखे गए लिंक।
a:visited { }
required चिह्नित इनपुट और optional छोड़े गए इनपुट।
input:required { }
ऐसे इनपुट जिनका मान अपने सत्यापन नियम पास करता या फ़ेल करता है।
input:invalid { }
ऐसा इनपुट जिसे उपयोगकर्ता संपादित नहीं कर सकता।
input:read-only { }
वह एलिमेंट जिसका id URL fragment से मैच करता है।
#note:target { }
पहले से चुना गया ऑप्शन या समूह का डिफ़ॉल्ट बटन।
input:default { }
स्क्रिप्ट द्वारा अनिर्धारित स्थिति में रखा गया चेकबॉक्स।
input:indeterminate { }
कोई भी built-in एलिमेंट, या कस्टम एलिमेंट जब वह रजिस्टर हो जाता है।
my-widget:defined { }
दी गई भाषा वाला एलिमेंट।
p:lang(fr) { }
सूडो-एलिमेंट
एलिमेंट से पहले बनाया गया content नोड।
label::before { content: ""; }
एलिमेंट के बाद बनाया गया content नोड।
code::after { content: ";"; }
टेक्स्ट ब्लॉक का पहला अक्षर।
p::first-letter { }
इनपुट का placeholder टेक्स्ट।
input::placeholder { }
टेक्स्ट ब्लॉक की पहली पंक्ति।
p::first-line { }
वह टेक्स्ट जिसे उपयोगकर्ता ने हाइलाइट किया है।
::selection { }
सूची आइटम की bullet या संख्या।
li::marker { }
फ़ुलस्क्रीन एलिमेंट या dialog के पीछे का क्षेत्र।
dialog::backdrop { }
file input के भीतर का browse बटन।
input::file-selector-button { }
shadow-DOM का वह भाग जिसे host ने expose किया है।
my-widget::part(header) { }
एट्रिब्यूट सेलेक्टर
ऐसे एलिमेंट जिन पर वह एट्रिब्यूट है, कोई भी मान।
[required] { }
एट्रिब्यूट बिल्कुल val के बराबर।
[type="submit"] { }
एट्रिब्यूट val से शुरू होता है।
a[href^="https"] { }
एट्रिब्यूट val पर ख़त्म होता है।
a[href$=".pdf"] { }
एट्रिब्यूट में val शामिल है।
a[href*="login"] { }
space से अलग की गई सूची जिसमें val शामिल है।
[class~="badge"] { }
मान बिल्कुल val के बराबर या val से शुरू होता है और उसके बाद hyphen।