Kif tiġi kkalkulata l-CSS specificity?

Question

Accepted Answer

Meta regoli multipli jissottomettuh l-istess element, **specificity** jiddeciedi liema waħda taħseb. Hija skop ikkalkulat mill-partijiet tas-selector, komparat bħala 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)
```

Kompara minn ix-xellug lejn il-lemin; l-ewwel kolonna li tifferenza tiddecidi l-winner.

```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 */
```

## Regoli ewlenin

- **id** wieħed jahaq kwalunkwe numru ta' **klassijiet**; klassi waħda jahaq kwalunkwe numru ta' elementi. (M'għandekx tista' "tqabbad" livelli aktar baxxi biex taġbat wieħed ogħla.)
- Jekk il-specificity hija **ugwali**, ir-regola li tidher **aktar tard** fis-sors taħseb (ordni tas-sors).
- **`!important`** toborroz il-specificity normali totalment — aħħar risorsa li hija diffiċli li tobborza (ikollok bżonn `!important` ieħor b'specificity ogħla).

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

## Gwida prattika

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

## Għaliex din importanti

Uffizzjalment tat-tħassib "għaliex il-CSS tiegħi mhux qiegħda tapplika?" hija konflitt ta' specificity — regola aktar speċifika mkompla oħħora qiegħda taħseb.

Iżżomm il-selettori baxxi u ċatti (favur klassijiet singoli, ġib id u `!important`) iżżomm il-specificity prevedwibbli, sabiex l-istili jibqaʻ faċli biex jobborżu u żommu.