Πώς υπολογίζεται η ειδικότητα CSS;

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 ξεπερνάει οποιονδήποτε αριθμό στοιχείων. (Δεν μπορείτε να "προσθέσετε" χαμηλότερα επίπεδα για να νικήσετε ένα υψηλότερο.)
- Εάν η ειδικότητα είναι **ίση**, ο κανόνας που εμφανίζεται **αργότερα** στο source κερδίζει (source order).
- Το **`!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 μου;" είναι ένα σύγκρουση ειδικότητας — ένας πιο συγκεκριμένος κανόνας αλλού κερδίζει.

Το να κρατάτε τους selectors χαμηλούς και επίπεδους (προτιμήστε μία class, αποφύγετε ids και `!important`) κρατάει την ειδικότητα προβλέψιμη, έτσι τα styles παραμένουν εύκολα να παρακάμπτονται και να συντηρούνται.