Kako kaskada i nasljeđivanje odlučuju koji se stilovi primjenjuju?

Question

Accepted Answer

Kada nekoliko pravila može oblikovati element, dva mehanizma odlučuju rezultat: **kaskada** (koje pravilo pobjeđuje) i **nasljeđivanje** (koja svojstva se prosleđuju od roditelja prema djeci).

## Zašto je to važno

Preglednik bira pobjedu izjave provjeravanjem redoslijeda prioriteta:

```text
1. Importance   → !important beats normal declarations
2. Specificity  → more specific selector wins (ids > classes > elements)
3. Source order → if still tied, the LAST rule defined wins
```

```css
p { color: blue; }          /* specificity 0,0,1 */
.text { color: green; }     /* specificity 0,1,0 → wins over the element rule */
p { color: red; }           /* same specificity as first, but LATER → would beat blue */
/* result for <p class="text">: green (class beats element) */
```

## Nasljeđivanje — neka svojstva se prosleđuju djeci

Neka svojstva (većinom **vezana uz tekst**) automatski se nasljeđuju od potomaka; većina ne.

```css
body {
  color: #333;        /* ✅ inherited — all text descendants get it */
  font-family: serif; /* ✅ inherited */
  border: 1px solid;  /* ❌ NOT inherited — children don't get a border */
}
```

**Naslijeđena** po zadanoj vrijednosti: `color`, `font-*`, `line-height`, `text-align`, `visibility`, `cursor`. **Nisu naslijeđena**: `border`, `margin`, `padding`, `background`, `width`, `height`, `display`.

## Eksplicitna kontrola nasljeđivanja

```css
.child {
  color: inherit;  /* force-take the parent's value */
  border: initial; /* reset to the property's default */
  all: unset;      /* reset everything: inherit if inheritable, else initial */
}
```

## Sažetak specifičnosti unutar kaskade

Zato što pravilo niske specifičnosti može biti poraženo čak i ako je napisano kasnije — specifičnost se provjerava *prije* redoslijeda izvora. Razumijevanje redoslijeda (važnost → specifičnost → redoslijed izvora) objašnjava gotovo svaki slučaj "moj stil se ne primjenjuje".

## Zašto je to važno

Kaskada i nasljeđivanje su temeljni model *kako se CSS zapravo razriješava*.

Znanje redoslijeda prioriteta ispravlja sukobe, znanje kojih svojstava se nasljeđuje omogućava vam da postavite `color`/`font` jednom na `body` umjesto svugdje, a `inherit`/`initial`/`unset` vam daju preciznu kontrolu — zajedno, oni čine CSS predvidivim umjesto magičnim.