CSS

Miten CSS-säännöt periytyvät elementtien välillä

Periytymisellä tarkoitetaan tilannetta, jossa lapsielementti perii ulkoasuun liittyviä ominaisuuksia vanhemmaltaan. Esimerkiksi jos HTML-dokumentin body-elementille määritellään tekstinväri ominaisuudella color, kaikki bodyn sisällä olevat elementit perivät tämän värin, ellei niitä ylikirjoiteta erikseen.

Valitsimet määrittelevät, mihin elementteihin tyylisäännöt kohdistuvat, mikä puolestaan vaikuttaa siihen, mitä periytyy. CSS:n periytymisessä otetaan aina huomioon cascade-prosessi ja sen vaikutus tyylisääntöjen keskinäiseen priorisointiin. Mikäli lapsielementille määritellään sama ominaisuus useasta lähteestä, selain valitsee säännön CSS:n määrittelemän tärkeysjärjestyksen (spesifisyys, sijainti, tärkeys) perusteella.

Miksi CSS:n periytyminen on hyödyllistä?

Periytymisen avulla on mahdollista pienentää CSS-tiedostojen kokoa ja vähentää monimutkaisuutta, mikä parantaa sivuston latausnopeutta ja helpottaa koodin ylläpitoa.

Alla olevissa esimerkeissä on sama lopputulos, mutta jälkimmäinen tilanne hyödyntää periytymistä ja ryhmittelyä tehokkaammin. Tämä pienentää tiedostokokoa, nopeuttaa tyylien renderöintiä selaimessa ja parantaa ylläpidettävyyttä.

/* periytymistä ja ryhmittelyä ei hyödynnetä */
body { 
  background-color: red;
  color: #00FF00;
  font-family:Arial,Verdana,sans-serif;
}
h1 {
  color: #00FF00;
  font-family:Arial,Verdana,sans-serif;
  font-size:90%;
}
h2 {
  color: #00FF00;
  font-family:Arial,Verdana,sans-serif;
  font-size:90%;
  
} 

/* periytymistä ja ryhmittelyä hyödynnetään */
body { 
  background-color: red;
  color: #00FF00;
  font-family:Arial,Verdana,sans-serif;
}
h1, h2 {
  font-size:90%;
}

Periytymisen rajoitukset

Kaikki ominaisuudet eivät periydy automaattisesti — siksi periytymisessä on tärkeää tuntea tietyt rajoitukset:

• taulukot ja taulukko-elementit perivät ominaisuuksia ainoastaan muilta taulukkoelementeiltä
• Vain osa CSS:n ominaisuuksista periytyy oletusarvoisesti. Periytyviä ovat useimmat tekstin ulkoasuun liittyvät ominaisuudet kuten: border-collapse, border-spacing, caption-side, color, cursor, direction, empty-cells, font ja kaikki muut font-alkuiset ominaisuudet, letter-spacing, line-height, list-style ja kaikki muut list-style-alkuiset ominaisuudet, quotes, text-align, text-indent, text-transform, white-space, widows ja word-spacing. Sen sijaan muut ominaisuudet eivät periydy.

Periytymisen ohjaaminen: inherit

Jos haluat pakottaa periytymisen ominaisuuksille, jotka eivät normaalisti periydy, käytä arvoa inherit:

div {
  border: inherit;
}

Artikkelin tiedot

Otsikko: Miten CSS-säännöt periytyvät elementtien välillä

Kuvaus: Opi, miten CSS:n periytyminen helpottaa tyylien hallintaa. Opettele hyödyntämään periytymistä ja kirjoita selkeämpiä ja tehokkaampia tyylejä.

Julkaisija: Koulutus- ja konsultointipalvelu KK Mediat

Viimeksi päivitetty: 28.8.2025

Kirjoittaja: Keijo Kortelainen

Keijo on verkkoliiketoiminnan ja digimarkkinoinnin asiantuntija, joka on auttanut satoja suomalaisia yrityksiä kasvattamaan näkyvyyttään ja myyntiään verkossa. Keijolla on BBA-tutkinto verkkokaupasta (BBA in eCommerce) sekä lähes kolmen vuosikymmen kokemus web-teknologioista (mm. HTML, CSS, JavaScript, PHP ja SQL) ja sisältömarkkinoinnista. Hän toimii yrittäjänä, konsulttina ja freelancerina – ja on jakanut osaamistaan 2kmediat.com-sivustolla yli 20 vuoden ajan.

LinkedIn