लोड हो रहा है...
CSS सेलेक्टर्स पूर्ण संदर्भ
यह पूर्ण CSS सेलेक्टर्स संदर्भ गाइड डेवलपर्स के लिए डिज़ाइन किया गया है ताकि वे CSS विकास के दौरान सभी प्रकार के सेलेक्टर्स का त्वरित और सही उपयोग कर सकें। यह गाइड प्रत्येक सेलेक्टर की सिंटैक्स, उपयोग, और ब्राउज़र सपोर्ट के साथ उदाहरण प्रदान करता है। इसमें बेसिक सेलेक्टर्स, कॉम्बिनेटर, एट्रिब्यूट सेलेक्टर्स, प्सूडो-क्लास और प्सूडो-एलिमेंट सेलेक्टर्स, एडवांस्ड सेलेक्टर्स और मीडिया क्वेरी सेलेक्टर्स शामिल हैं। डेवलपर्स इसे तुरंत अपने प्रोजेक्ट में लागू कर सकते हैं और यह तेज़ संदर्भ और कोडिंग दक्षता बढ़ाने में मदद करता है।
📊 Basic Selectors
| सेलेक्टर | सिंटैक्स | विवरण | उदाहरण | ब्राउज़र समर्थन |
|---|---|---|---|---|
| * | * | यूनिवर्सल सेलेक्टर - सभी एलिमेंट्स का चयन करता है | * { margin: 0; } | सभी ब्राउज़र |
| element | tagname | टाइप सेलेक्टर - निर्दिष्ट प्रकार के सभी एलिमेंट्स का चयन करता है | p { color: blue; } | सभी ब्राउज़र |
| .class | .classname | क्लास सेलेक्टर - निर्दिष्ट क्लास वाले एलिमेंट्स का चयन करता है | .highlight { background: yellow; } | सभी ब्राउज़र |
| \#id | #idname | आईडी सेलेक्टर - निर्दिष्ट आईडी वाला एलिमेंट | #header { width: 100%; } | सभी ब्राउज़र |
📊 Combinator Selectors
| सेलेक्टर | सिंटैक्स | विवरण | उदाहरण | ब्राउज़र समर्थन |
|---|---|---|---|---|
| descendant | A B | डिसेंडेंट सेलेक्टर - A के अंदर B का चयन | div p { margin: 10px; } | सभी ब्राउज़र |
| child | A > B | चाइल्ड सेलेक्टर - A का डायरेक्ट चाइल्ड B | ul > li { list-style: none; } | IE7+ |
| adjacent sibling | A + B | एडजेसेंट सिबलिंग - A के तुरंत बाद B | h1 + p { font-weight: bold; } | IE7+ |
| general sibling | A \~ B | जनरल सिबलिंग - A के बाद सभी B | h1 \~ p { color: gray; } | IE7+ |
📊 Attribute Selectors
| सेलेक्टर | सिंटैक्स | विवरण | उदाहरण | ब्राउज़र समर्थन |
|---|---|---|---|---|
| \[attribute] | \[attr] | निर्दिष्ट एट्रिब्यूट वाले एलिमेंट्स | \[disabled] { opacity: 0.5; } | IE7+ |
| \[attribute=value] | \[attr=val] | एट्रिब्यूट वैल्यू के बराबर | \[type="text"] { border: 1px solid; } | IE7+ |
| \[attribute\~=value] | \[attr\~=val] | एट्रिब्यूट में शब्द के रूप में वैल्यू शामिल | \[class\~="button"] { cursor: pointer; } | IE7+ |
| \[attribute^=value] | \[attr^=val] | एट्रिब्यूट वैल्यू से शुरू | \[href^="https"] { color: green; } | IE7+ |
| \[attribute\$=value] | \[attr\$=val] | एट्रिब्यूट वैल्यू पर समाप्त | \[src\$=".jpg"] { border: 2px solid; } | IE7+ |
| \[attribute*=value] | \[attr*=val] | एट्रिब्यूट में कहीं भी वैल्यू शामिल | \[title*="important"] { font-weight: bold; } | IE7+ |
| \[attribute="value" i] | \[attr="val" i] | केस-इन्सेंसिटिव एट्रिब्यूट मैच | \[type="EMAIL" i] { text-transform: lowercase; } | आधुनिक ब्राउज़र |
📊 Pseudo-class Selectors - Structural
| सेलेक्टर | सिंटैक्स | विवरण | उदाहरण | ब्राउज़र समर्थन |
|---|---|---|---|---|
| :first-child | :first-child | पहले चाइल्ड का चयन | p:first-child { margin-top: 0; } | IE7+ |
| :last-child | :last-child | आखिरी चाइल्ड का चयन | p:last-child { margin-bottom: 0; } | IE9+ |
| :nth-child(n) | :nth-child(n) | nवें चाइल्ड का चयन | tr:nth-child(2n) { background: #f0f0f0; } | IE9+ |
| :nth-last-child(n) | :nth-last-child(n) | पिछले से nवें चाइल्ड | li:nth-last-child(2) { color: red; } | IE9+ |
| :nth-of-type(n) | :nth-of-type(n) | nवें टाइप का चयन | h2:nth-of-type(odd) { color: blue; } | IE9+ |
| :nth-last-of-type(n) | :nth-last-of-type(n) | टाइप के अंतिम nवें एलिमेंट का चयन | p:nth-last-of-type(1) { font-weight: bold; } | IE9+ |
| :first-of-type | :first-of-type | टाइप का पहला एलिमेंट | img:first-of-type { float: left; } | IE9+ |
| :last-of-type | :last-of-type | टाइप का अंतिम एलिमेंट | p:last-of-type { margin-bottom: 20px; } | IE9+ |
| :only-child | :only-child | केवल चाइल्ड का चयन | p:only-child { text-align: center; } | IE9+ |
| :only-of-type | :only-of-type | टाइप का एकमात्र एलिमेंट | img:only-of-type { display: block; } | IE9+ |
| :empty | :empty | बिना चाइल्ड एलिमेंट्स का चयन | div:empty { display: none; } | IE9+ |
📊 Pseudo-class Selectors - User Action
| सेलेक्टर | सिंटैक्स | विवरण | उदाहरण | ब्राउज़र समर्थन |
|---|---|---|---|---|
| :hover | :hover | माउस होवर पर चयन | a:hover { color: red; } | सभी ब्राउज़र |
| :active | :active | क्लिक/एक्टिवेटेड पर चयन | button:active { transform: scale(0.95); } | सभी ब्राउज़र |
| :focus | :focus | कीबोर्ड फोकस पर चयन | input:focus { outline: 2px solid blue; } | सभी ब्राउज़र |
| :focus-visible | :focus-visible | दृश्य रूप से फोकस पर चयन | button:focus-visible { outline: 2px solid; } | आधुनिक ब्राउज़र |
| :focus-within | :focus-within | फोकस एलिमेंट वाला पैरेंट | form:focus-within { border: 1px solid blue; } | आधुनिक ब्राउज़र |
📊 Pseudo-class Selectors - Form States
| सेलेक्टर | सिंटैक्स | विवरण | उदाहरण | ब्राउज़र समर्थन |
|---|---|---|---|---|
| :enabled | :enabled | सक्रिय फॉर्म एलिमेंट | input:enabled { background: white; } | IE9+ |
| :disabled | :disabled | निष्क्रिय फॉर्म एलिमेंट | input:disabled { background: #f5f5f5; } | IE9+ |
| :checked | :checked | चेक किए गए चेकबॉक्स/रेडियो | input:checked + label { font-weight: bold; } | IE9+ |
| :indeterminate | :indeterminate | इंडिटर्मिनेट चेकबॉक्स | input:indeterminate { opacity: 0.5; } | IE9+ |
| :valid | :valid | वैध फॉर्म एलिमेंट | input:valid { border-color: green; } | IE10+ |
| :invalid | :invalid | अवैध फॉर्म एलिमेंट | input:invalid { border-color: red; } | IE10+ |
| :required | :required | आवश्यक फील्ड | input:required { border-left: 3px solid red; } | IE10+ |
| :optional | :optional | वैकल्पिक फील्ड | input:optional { border-left: 3px solid gray; } | IE10+ |
| :read-only | :read-only | केवल पढ़ने योग्य | input:read-only { background: #f9f9f9; } | आधुनिक ब्राउज़र |
| :read-write | :read-write | संपादन योग्य | input:read-write { background: white; } | आधुनिक ब्राउज़र |
| :placeholder-shown | :placeholder-shown | प्लेसहोल्डर दिखा रहा | input:placeholder-shown { font-style: italic; } | आधुनिक ब्राउज़र |
| :in-range | :in-range | मान रेंज में | input:in-range { border-color: green; } | आधुनिक ब्राउज़र |
| :out-of-range | :out-of-range | मान रेंज से बाहर | input:out-of-range { border-color: red; } | आधुनिक ब्राउज़र |
📊 Pseudo-class Selectors - Link States
| सेलेक्टर | सिंटैक्स | विवरण | उदाहरण | ब्राउज़र समर्थन |
|---|---|---|---|---|
| :link | :link | अदृश्य लिंक | a:link { color: blue; } | सभी ब्राउज़र |
| :visited | :visited | देखे गए लिंक | a:visited { color: purple; } | सभी ब्राउज़र |
| :any-link | :any-link | सभी लिंक | a:any-link { text-decoration: underline; } | आधुनिक ब्राउज़र |
| :target | :target | वर्तमान URL का लक्ष्य | :target { background: yellow; } | IE9+ |
📊 Pseudo-class Selectors - Logical
| सेलेक्टर | सिंटैक्स | विवरण | उदाहरण | ब्राउज़र समर्थन |
|---|---|---|---|---|
| :not(selector) | :not(sel) | सेलेक्ट नहीं करने वाले एलिमेंट्स | p:not(.special) { color: gray; } | IE9+ |
| :is(selector) | :is(sel1, sel2) | किसी भी सेलेक्टर से मैच | :is(h1, h2, h3) { margin-top: 0; } | आधुनिक ब्राउज़र |
| :where(selector) | :where(sel1, sel2) | जैसा :is(), 0 स्पेसिफिसिटी | :where(h1, h2) { color: blue; } | आधुनिक ब्राउज़र |
| :has(selector) | :has(sel) | निर्दिष्ट कंटेंट वाले एलिमेंट | div:has(img) { border: 1px solid; } | आधुनिक ब्राउज़र |
📊 Pseudo-element Selectors
| सेलेक्टर | सिंटैक्स | विवरण | उदाहरण | ब्राउज़र समर्थन |
|---|---|---|---|---|
| ::before | ::before | एलिमेंट से पहले कंटेंट जोड़ें | p::before { content: "→ "; } | IE9+ (single colon IE8+) |
| ::after | ::after | एलिमेंट के बाद कंटेंट जोड़ें | p::after { content: " ←"; } | IE9+ ( |
| ::first-line | ::first-line | पहली लाइन का चयन | p::first-line { font-weight: bold; } | IE9+ (single colon IE6+) |
| ::first-letter | ::first-letter | पहला अक्षर | p::first-letter { font-size: 2em; } | IE9+ (single colon IE6+) |
| ::selection | ::selection | सेलेक्टेड टेक्स्ट | ::selection { background: yellow; } | IE9+ |
| ::placeholder | ::placeholder | प्लेसहोल्डर टेक्स्ट | input::placeholder { color: #999; } | आधुनिक ब्राउज़र |
| ::backdrop | ::backdrop | फुलस्क्रीन बैकड्रॉप | dialog::backdrop { background: rgba(0,0,0,0.5); } | आधुनिक ब्राउज़र |
| ::marker | ::marker | लिस्ट मार्कर | li::marker { color: red; } | आधुनिक ब्राउज़र |
📊 Advanced Selectors
| सेलेक्टर | सिंटैक्स | विवरण | उदाहरण | ब्राउज़र समर्थन |
|---|---|---|---|---|
| :root | :root | डॉक्यूमेंट रूट | :root { --main-color: blue; } | IE9+ |
| :scope | :scope | स्कोप एलिमेंट | :scope > p { margin: 0; } | आधुनिक ब्राउज़र |
| :defined | :defined | डिफ़ाइंड कस्टम एलिमेंट | custom-element:defined { opacity: 1; } | आधुनिक ब्राउज़र |
| :host | :host | शैडो होस्ट | :host { display: block; } | आधुनिक ब्राउज़र |
| :host(selector) | :host(sel) | सेलेक्टर मैच होस्ट | :host(.active) { color: red; } | आधुनिक ब्राउज़र |
| :host-context(selector) | :host-context(sel) | कॉन्टेक्स्ट में होस्ट | :host-context(.dark) { color: white; } | आधुनिक ब्राउज़र |
| ::slotted(selector) | ::slotted(sel) | स्लॉटेड कंटेंट | ::slotted(p) { margin: 0; } | आधुनिक ब्राउज़र |
📊 Media Query Selectors
| सेलेक्टर | सिंटैक्स | विवरण | उदाहरण | ब्राउज़र समर्थन |
|---|---|---|---|---|
| @media | @media (condition) | मीडिया कंडीशन पर स्टाइल | @media (max-width: 768px) { .nav { display: none; } } | IE9+ |
| @supports | @supports (property: value) | ब्राउज़र सपोर्ट पर स्टाइल | @supports (display: grid) { .layout { display: grid; } } | आधुनिक ब्राउज़र |
| @container | @container (condition) | कंटेनर साइज पर स्टाइल | @container (min-width: 400px) { .card { flex-direction: row; } } | आधुनिक ब्राउज़र |
Quick Examples
css
CSS Code
/* बेसिक सेलेक्टर्स कॉम्बिनेशन */
.header nav ul li a:hover {
color: #007bff;
text-decoration: none;
}
/* फॉर्म्स के लिए एट्रिब्यूट सेलेक्टर्स */
input\[type="email"]:focus:valid {
border-color: green;
box-shadow: 0 0 5px rgba(0,255,0,0.3);
}
/* प्सूडो-एलिमेंट्स */
.quote::before {
content: "“";
font-size: 2em;
color: #999;
}
/* स्ट्रक्चरल सेलेक्टर्स */
.grid-item:nth-child(3n+1) {
margin-left: 0;
}
/* आधुनिक लॉजिकल सेलेक्टर्स */
:is(h1, h2, h3):not(.no-margin) {
margin-top: 2rem;
}सर्वोत्तम प्रथाएँ:
विशिष्ट सेलेक्टर्स का उपयोग करें ताकि अनपेक्षित स्टाइलिंग से बचा जा सके। पुन: उपयोग के लिए क्लास सेलेक्टर्स को प्राथमिकता दें। CSS फ़ाइल का आकार कम करने के लिए सेलेक्टर्स को कुशलतापूर्वक मिलाएँ। विभिन्न ब्राउज़रों में प्सूडो-क्लास टेस्ट करें। :not() का सावधानीपूर्वक उपयोग करें, क्योंकि यह प्रदर्शन को प्रभावित कर सकता है। प्सूडो-एलिमेंट्स वर्चुअल DOM एलिमेंट्स बनाते हैं। जटिल सेलेक्टर संयोजनों में स्पेसिफिसिटी का ध्यान रखें। डायनेमिक फॉर्म स्टाइलिंग के लिए एट्रिब्यूट सेलेक्टर्स का उपयोग करें। आधुनिक सेलेक्टर्स (:has(), :is()) का ब्राउज़र सपोर्ट टेस्ट करें। संबंधित सेलेक्टर्स को एक साथ समूहित करें। ओवर-नेस्टिंग से बचने के लिए डिसेंडेंट सेलेक्टर्स का विवेकपूर्ण उपयोग करें। ध्यान दें कि कुछ प्सूडो-क्लास केवल विशिष्ट एलिमेंट्स पर काम करती हैं।
🧠 अपने ज्ञान की परीक्षा करें
शुरू करने के लिए तैयार
Reference Knowledge Check
CSS सेलेक्टर्स और उनके उपयोग का परीक्षण करें।
3
प्रश्न
70%
पास करने के लिए
∞
समय
∞
प्रयास
📝 निर्देश
- हर प्रश्न को ध्यान से पढ़ें
- हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
- आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
- आपकी प्रगति शीर्ष पर दिखाई जाएगी