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()` जटिल लक्ष्य संक्षिप्त करते. विशिष्टता व्यवस्थापनीय ठेवण्यासाठी id/गहन नेस्टिंगपेक्षा वर्ग पसंत करा.