CSS વિશિષ્ટતા કેવી રીતે ગણવામાં આવે છે?

Question

Accepted Answer

જ્યારે બહુવિધ નિયમો સમાન તત્વને લક્ષ્य કરે છે, **વિશિષ્ટતા** નિર્ધારિત કરે છે કે કયો જીતે છે. તે સિલેક્ટરના ભાગોમાંથી ગણતરી કરેલ સ્કોર છે, જે tuple `(ids, classes, elements)` તરીકે સરખામણી કરવામાં આવે છે।

```text
Inline style   → 1,0,0,0  (highest, short of !important)
ID             → 0,1,0,0
Class / attr / pseudo-class → 0,0,1,0
Element / pseudo-element    → 0,0,0,1
Universal (*)  → 0,0,0,0  (no weight)
```

બાર થી જમણે સરખામણી કરો; પ્રથમ સ્તંભ જે અલગ હોય તે વિજેતા નક્કી કરે છે।

```css
#nav .item a   { color: red; }   /* 1 id, 1 class, 1 element → 1,1,1 */
.menu .item a  { color: blue; }  /* 0 id, 2 classes, 1 element → 0,2,1 */
/* red wins — having ONE id beats any number of classes */
```

## મુખ્ય નિયમો

- એક જ **id** કોઈપણ સંખ્યાના **વર્ગો** કરતાં વધુ વજન ધરાવે છે; એક જ વર્ગ કોઈપણ સંખ્યાના તત્વો કરતાં વધુ વજન ધરાવે છે. (તમે નીચલા સ્તરોને "ઉમેરી" શકતા નથી ઉચ્ચતર એક હરાવવા માટે.)
- જો વિશિષ્ટતા **સમાન** છે, તો નિયમ જે પછીથી દેખાય છે તે **સ્ત્રોત જીતે છે** (સ્ત્રોત ક્રમ).
- **`!important`** સામાન્ય વિશિષ્ટતાને સંપૂર્ણપણે ઓવરराઇड કરે છે — આખરી ઉપાય જે ઓવરરાઇડ કરવું મુશ્કેલ છે (તમને વધુ વિશિષ્ટતા સાથે અન્ય `!important` ની જરૂર હશે)।

```css
.btn { color: blue !important; } /* ⚠️ wins over almost everything — avoid */
```

## વ્યવહારિક માર્ગદર્શન

```css
/* ❌ over-specific, hard to override later */
#sidebar ul li.active a { }
/* ✅ keep it flat — one class -> easy to manage */
.nav-link--active { }
```

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

વધુમાં વધુ "મારી CSS કેમ લાગુ નથી થતી?" હતાશા વિશિષ્ટતાના સંઘર્ષ છે — આ જગ્યાએ વધુ ચોક્કસ નિયમ જીતી રહ્યો છે।

સિલેક્ટર્સને નીચું અને સમતલ રાખો (એક વર્ગોને અનુકૂળ બનાવો, ids અને `!important` ને ટાળો) વિશિષ્ટતા પૂર્વાનુમેયક રાખે છે, તેથી શૈલીઓ ઓવરરાઇડ અને જાળવણી માટે સરળ રહે છે.