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`हरूसँग पनि मेल खान्छ, जबकि `.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()` जटिल लक्ष्यीकरणलाई संक्षिप्त बनाउँछ। विशिष्टता व्यवस्थाप्य राख्न आईडी/भारी नेस्टिङ भन्दा वर्गहरूलाई प्राथमिकता दिनुहोस्।