Cascade en inheritance

1. niet-conflicterende regels worden gecombineerd
2. conflicterende regels worden uitgevochten door volgorde en specificity
3. wat je niet bewust gestijld hebt, komt van de browser defaults
4. sommige properties erven over van parent naar child, vooral alles wat met tekst te maken heeft

Cascade

1. Combineren

Twee regels die verschillende properties zetten, botsen niet. Ze stapelen of combineren.

<h1>hello CSS</h1>

a {
    color: white;
}

/* ... heel veel andere regels ... */

[href] {
    background-color: blue;
}

Witte tekst op een blauwe achtergrond. Geen van beide regels wint, ze doen allebei hun werk.

2. Conflict: de volgorde

💡 De cascade 💡

Twee regels die dezelfde property zetten en even sterk zijn: de laatste wint.
Dat geldt ook binnen één blok.

h1 {
    color: white;
}

h1 {
    background-color: blue;
    color: green;
    color: red;
}

De h1 wordt rood. white en green zijn allebei overschreven door de color die er onder staat.

3. Conflict: specificity

Twee regels die dezelfde property zetten maar niet even sterk zijn: de sterkste wint, ongeacht de volgorde ⚠️.

<h1 id="title">hello CSS</h1>

#title {
    color: white;
}

h1 {
    background-color: blue;
    color: red;
}

De tekst wordt wit, ook al staat red lager in het bestand. #title is sterker dan h1.

🙈 spoiler: Specificity berekenen

Specificity is eigenlijk een berekening: je telt hoeveel id's, classes, attributes, elementen... er in je selector zitten. Zodra je combinators, pseudo-classes en pseudo-elements kent, kan je die som maken voor een selector als main#main section p:last-child > a[href^="tel:"]:first-of-type::after.

Hoe die som precies werkt, staat op Specificity berekenen.

🙈

Het is 1-3-5

Nooit

Een inline style (style="color: red") overschrijft je external stylesheet. Een !important overschrijft zelfs inline styles.

Ze zijn een manier om de cascade te omzeilen in plaats van te begrijpen.
Het is hét kenmerk van een developer die niet weet wat die doet.

4. Browser defaults

Wat jij nergens bepaalt, dat beslist de browser.
Een h1 is groot en vet, een link is blauw en onderlijnd, een ul heeft bolletjes en inspringing...

h1 {
    background-color: blue;
}

De achtergrond is blauw, maar de tekstkleur en de grootte komen nog altijd van de browser. Met normalize zorg je dat die defaults overal hetzelfde zijn.

Inheritance

Sommige properties geef je door aan alles wat er in zit. Dat heet inheritance, en het spaart je heel veel typwerk.

:root {
    font-family: sans-serif;
    color: darkred;
}

Je hoeft dat niet op elk element te herhalen: alles in je body erft het.

Wat erft er zoal over:

• font properties: font-family, color, font-size, font-weight, text-align
• list properties: list-style, list-style-position

Wat erft er niet over: alles wat met lay-out te maken heeft, zoals background-color, border, width, height, margin en padding.

:root 🥕

:root is het allerhoogste element in je document, hoger dan body. Alles wat voor je hele site geldt, zet je daar. Wil je ergens een uitzondering, dan overschrijf je die lager.

Oefening: wat erft er over?

Antwoord

De tekstkleur en het lettertype op :root gelden meteen voor de h1, de paragraaf, de strong, de h2 en de lijst. Je hebt één regel geschreven en de hele pagina is mee.

De li-elementen nemen de kleur van de ul over, want kleur erft.

background-color erft niet over. Het lijkt wel zo omdat alle elementen doorzichtig zijn en je dus de achtergrond van :root ziet, maar in de devtools zie je dat de p zelf geen achtergrondkleur heeft. Dat onderscheid gaat je later bij het box model nog van pas komen.

Gebruik de devtools

Open de devtools, klik een element aan, en kijk!

• bovenaan staat de regel die wint
• daaronder staan de regels die verloren hebben, met hun waarde doorstreept
• naast elke regel staat uit welk bestand en welke lijn ze komt
• onder Computed staat wat het element uiteindelijk geworden is

Oefening: waarom werkt mijn regel niet

Vier paragrafen die allemaal groen zouden moeten zijn, en geen enkele is dat. Zoek per paragraaf uit waarom.

Openen in een nieuw tabblad

Antwoord

Paragraaf 1: volgorde. Er staan twee keer .een, allebei even sterk, en de laatste zet hem op zwart.

Paragraaf 2: specificity. Die paragraaf heeft naast class="twee" ook id="opvallend", en een id verslaat een class. Dat de groene regel bovenaan staat, maakt niets uit.

Paragraaf 3: een eigen waarde wint van een geërfde. De div is wel degelijk groen, dat zie je aan de tekst die er rechtstreeks in staat. De paragraaf erft die kleur, maar er staat ook een regel rechtstreeks op die paragraaf, en een eigen waarde verslaat altijd een geërfde. Hoe zwak je selector ook is.

Paragraaf 4: typo. Er staat vier in plaats van .vier. Dat selecteert een element met tag name "vier", en dat bestaat niet. De browser zegt er niets over, hij negeert de regel gewoon.
Daarbij kunnen de devtools je niet helpen. Dat moest jij zélf weten.