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()` જટિલ લક્ષ્યીકરણને સંક્ષિપ્ત બનાવે છે. વિશેષતા વ્યવસ્થાપિત રાખવા માટે આઇડીઝ/ભારે માળખા કરતાં કક્ષાઓને પસંદ કરો.