CSS સિલેક્ટર્સના મુખ્ય પ્રકારો શું છે?

Question

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

સંયોજકો — તત્વો વચ્ચેના સંબંધો

સ્યુડો-ક્લાસ અને સ્યુડો-તત્વો

જૂથીકરણ અને આધુનિક સિલેક્ટર્સ

શા માટે તે મહત્વપૂર્ણ છે

સંબંધિત પ્રશ્નો