Πώς η διαδοχή και η κληρονομιά αποφασίζουν ποιά στυλ εφαρμόζονται;

Question

Accepted Answer

Όταν πολλοί κανόνες θα μπορούσαν να στυλ ένα στοιχείο, δύο μηχανισμοί αποφασίζουν το αποτέλεσμα: η **διαδοχή** (ποιος κανόνας κερδίζει) και η **κληρονομιά** (ποιες ιδιότητες μεταβιβάζονται από τους γονείς).

## Η διαδοχή — επίλυση συγκρούσεων, κατά σειρά

Το πρόγραμμα περιήγησης επιλέγει τη νικητήρια δήλωση ελέγχοντας, κατά σειρά προτεραιότητας:

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

## Κληρονομιά — ορισμένες ιδιότητες μεταβιβάζονται στα παιδιά

Ορισμένες ιδιότητες (κυρίως **σχετικές με κείμενο**) κληρονομούνται αυτόματα από τους απογόνους· οι περισσότερες δεν είναι.

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

**Κληρονομούμενα** εξ ορισμού: `color`, `font-*`, `line-height`, `text-align`, `visibility`, `cursor`. **Δεν κληρονομούνται**: `border`, `margin`, `padding`, `background`, `width`, `height`, `display`.

## Έλεγχος κληρονομιάς ρητά

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

## Περίληψη ειδικότητας εντός της διαδοχής

Για αυτό ένας κανόνας χαμηλής ειδικότητας μπορεί να χάσει ακόμη κι αν γραφτεί αργότερα — η ειδικότητα ελέγχεται *πριν* από τη σειρά της πηγής. Η κατανόηση της σειράς (σημασία → ειδικότητα → σειρά πηγής) εξηγεί σχεδόν κάθε περίπτωση "το στυλ μου δεν εφαρμόζεται".

## Γιατί σημαίνει

Η διαδοχή και η κληρονομιά είναι το βασικό μοντέλο του *πώς η CSS στην πραγματικότητα λύνει*.

Η γνώση της σειράς προτεραιότητας αποσφαλματώνει συγκρούσεις, η γνώση ποιες ιδιότητες κληρονομούνται σας επιτρέπει να ορίσετε `color`/`font` μία φορά στο `body` αντί παντού, και `inherit`/`initial`/`unset` σας δίνουν ακριβή έλεγχο — μαζί κάνουν το CSS προβλέψιμο παρά μαγικό.