CSS सिलेक्टर्स के मुख्य प्रकार क्या हैं?

Question

Accepted Answer

सिलेक्टर्स वे तत्व लक्षित करते हैं जिन पर नियम लागू होता है। वे सरल (टैग के आधार पर) से लेकर शक्तिशाली संयोजकों तक होते हैं। ```css /* Basic selectors */ p { } /* type: all

*/ .card { } /* class: elements with class="card" (reusable) */ #header { } /* id: the one element with id="header" (unique) */ * { } /* universal: every element */ [type="text"]{ } /* attribute: inputs with type=text */ ``` ## संयोजक — तत्वों के बीच संबंध ```css .menu li { } /* descendant: any li INSIDE .menu (any depth) */ .menu > li { } /* child: only DIRECT children li */ h2 + p { } /* adjacent sibling: the p immediately AFTER an h2 */ h2 ~ p { } /* general sibling: all p siblings after an h2 */ ``` स्पेस (पूर्वज) और `>` (सीधा बाल) के बीच का अंतर मायने रखता है: `.menu li` गहराई में नेस्ट किए गए `li`s से भी मेल खाता है, जबकि `.menu > li` केवल शीर्ष स्तर से मेल खाता है। ## छद्म-वर्ग और छद्म-तत्व ```css a:hover { } /* state: while hovered */ li:first-child { } /* structural: the first li */ li:nth-child(2n){ } /* every even li */ p::first-line { } /* pseudo-element: the first rendered line */ ``` ## समूहीकरण और आधुनिक सिलेक्टर्स ```css h1, h2, h3 { } /* apply to all three */ :is(h1, h2) a { } /* :is() shortens long selector lists */ .card:has(img) { } /* :has() — a parent that CONTAINS an img */ ``` ## यह महत्वपूर्ण क्यों है सिलेक्टर्स वह तरीका हैं जिसके द्वारा आप शैलियों को मार्कअप से जोड़ते हैं। कक्षाओं (कार्यकर्ता), संयोजकों (संबंधों के लिए), और संरचनात्मक/स्थिति छद्म-वर्गों में महारत हासिल करने से आप हर जगह अतिरिक्त कक्षाएं जोड़े बिना सटीक रूप से लक्ष्य कर सकते हैं — और आधुनिक `:is()`/`:has()` जटिल लक्ष्यीकरण को संक्षिप्त बनाते हैं। विशिष्टता को प्रबंधनीय रखने के लिए आईडीज/भारी नेस्टिंग के बजाय कक्षाओं को प्राथमिकता दें।