Du setter tekstfargen til rød på html-elementet, og plutselig er all tekst på hele siden rød. Overskrifter, avsnitt, lenketekster, listelementer. Du har bare skrevet en eneste CSS-regel, men den slår inn overalt. Det som skjer er arv i CSS. Egenskaper du setter på et foreldreelement, flyter automatisk nedover til barna. Forstår du hvordan arv fungerer, slipper du å gjenta de samme reglene for hvert element på siden.
Hvordan arv i CSS fungerer
HTML-dokumenter har en trestruktur. Html-elementet er stamfaren, body er barnet, og inne i body ligger overskrifter, avsnitt og div-er som igjen kan inneholde flere elementer. Når du setter en CSS-egenskap på et element, sjekker nettleseren om barneelementene har en egen verdi for samme egenskap. Hvis ikke, arver de verdien fra forelderen.
Setter du color: green på body, får alle tekstelementer inni body grønn tekst. Legger du deretter til color: blue på p-elementet, blir avsnittene blå mens resten forblir grønn. Barnets egen regel overstyrer alltid den arvede verdien. Arv fungerer som en standard som gjelder helt til noe mer spesifikt tar over.
Hvilke egenskaper arves, og hvilke gjør det ikke?
Her er det mange snubler. Ikke alle CSS-egenskaper arves. Det finnes et klart mønster: egenskaper som handler om tekst og lesbarhet arves, mens egenskaper som handler om layout og plassering ikke gjør det.
Egenskaper som arves:
- color (tekstfarge)
- font-family (skrifttype)
- font-size (skriftstørrelse)
- line-height (linjehøyde)
- text-align (tekstjustering)
Egenskaper som ikke arves:
- width og height (bredde og høyde)
- margin og padding (ytre og indre marg)
- border (kantlinje)
- background (bakgrunn)
Logikken er enkel når du tenker over det. Hvis width ble arvet, ville hvert eneste barneelement få nøyaktig samme bredde som forelderen, og layout ville bli umulig. Men at alle tekstelementer arver skrifttypen fra body er praktisk. Du setter skriften ett sted og slipper å gjenta den for hvert element.
Styr arv med inherit, initial og unset
CSS gir deg tre nøkkelord for å ta kontroll over arv manuelt. De er spesielt nyttige når standardoppførselen ikke gir deg det du trenger.
inherit tvinger et element til å arve verdien fra forelderen, selv for egenskaper som normalt ikke arves. Setter du border: inherit på et barneelement, får det samme kantlinje som forelderen. Uten inherit ville barnet ikke fått noen kantlinje i det hele tatt.
initial tilbakestiller en egenskap til nettleserens opprinnelige standardverdi. Hvis du har arvet en rød tekstfarge fra et foreldreelement, setter color: initial fargen tilbake til det nettleseren definerer som standard, typisk svart. Dette er nyttig når du vil nulle ut en arvet stil uten å hardkode en bestemt verdi.
unset kombinerer de to foregående. For egenskaper som normalt arves, oppfører unset seg som inherit. For egenskaper som normalt ikke arves, oppfører den seg som initial. Det er en slags "reset til naturlig oppførsel"-knapp som fungerer uansett egenskap.
Typiske feil med arv i CSS
En vanlig feil er å sette font-size i piksler på body og anta at alle elementer får nøyaktig den størrelsen. Overskrifter har sine egne standardstørrelser i nettleserens stilark, og disse overstyrer den arvede verdien. Du må sette font-size eksplisitt på h1 til h6 hvis du vil ha full kontroll.
En annen feil er å lure på hvorfor bakgrunnen ikke arves. Du setter background-color: lightgray på en div, men elementene inni får ikke grå bakgrunn. Det ser kanskje slik ut visuelt fordi barna er gjennomsiktige og foreldreens bakgrunn skinner gjennom. Men barna har faktisk ikke arvet bakgrunnsfargen. Forskjellen merkes først når du flytter et barneelement ut av forelderen.
Er du usikker på om en egenskap arves, er MDN CSS Reference den mest pålitelige kilden. Hver egenskap har en "Inherited"-linje i spesifikasjonen som sier ja eller nei.
Arv gjør CSS effektivt
Uten arv måtte du sette skrifttype, tekstfarge og linjehøyde på hvert eneste element. Et stilark for en middels stor nettside ville blitt hundrevis av linjer lenger. Arv lar deg sette globale stiler ett sted og bare overstyre der det trengs. Det er hele poenget med kaskaden i CSS: generelle regler flyter nedover, spesifikke regler fanger opp unntakene.
Kombinert med CSS-selektorer og spesifisitet gir arv deg et system der du skriver mindre kode og får mer forutsigbare resultater. Sett typografi og farger på body. Bruk klasser for å avvike der det trengs. La arv gjøre resten av jobben.
Neste steg
Nå som du forstår hvordan arv i CSS overfører egenskaper fra foreldre til barn, er neste naturlige steg å lære om farger i CSS og måleenheter i CSS. Begge bygger direkte på prinsippene du nå kjenner.
Denne artikkelen bygger på en videoleksjon fra kurset CSS - komplett guide på Utdannet.no. I kurset lærer du å bruke arv strategisk i stilarkene dine, sette opp globale typografistiler, og feilsøke uventede CSS-verdier med DevTools.
