CSS specificity ఎలా లెక్కించబడుతుంది?

Question

Accepted Answer

ఒకే మూలకకు బహుళ నియమాలు లక్ష్యంగా ఉన్నప్పుడు, **specificity** ఏది విజయవంతమవుతుందో నిర్ణయిస్తుంది. ఇది selector యొక్క భాగాల నుండి లెక్కించిన స్కోర్, 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** ఎటువంటి సంఖ్యలో **classes** ను అధిగమిస్తుంది; ఒకటి class ఎటువంటి సంఖ్యలో elements ను అధిగమిస్తుంది. (మీరు అధిక శ్రేణిని ఓడించడానికి తక్కువ శ్రేణిలను "జోడించలేరు".)
- specificity **సమానం** అయితే, మూలంలో **తరువాత** కనిపించే నియమం విజయవంతమవుతుంది (మూల క్రమం).
- **`!important`** సాధారణ specificity సంపూర్ణంగా అధిక్రమించుకుంటుంది — చివరి ఆశ్రయం, ఇది చేక్క ఓడించడం కష్టం (మీకు అధిక specificity తో మరొక `!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 ఎందుకు విధిచేయబడవు?" నిరాశ specificity సంఘర్షణ — మరిన్ని నిర్దిష్ట నియమం ఇతర చోట విజయవంతమవుతుంది.

selectors ని తక్కువ మరియు ఫ్లాట్‌గా ఉంచడం (ఒకే classes ఉపయోగించండి, ids మరియు `!important` తప్పించండి) specificity ని ఊహించదగినదిగా ఉంచుతుంది, కాబట్టి శైలులు చేక్క ఓడించడానికి మరియు నిర్వహించడానికి సులభంగా ఉంటాయి.