Inheritance ? Wtf ?

Benamingen die je wel eens tegenkomt, maar wat doe je ermee ?
Deze begrippen hebben betrekking op de documentstructuur, en zijn dan wel eens handig om te weten wat ze betekenen als je afwijkingen in je opmaak spreek: CSS wilt verwezenlijken.

Hoe zit dat nu met parent en child.

Het is je misschien al eens opgevallen hier of ergens anders, maar er is bijna altijd sprake van inheritance, parent en child (vrij vertaald: erfelijkheid, ouder en kind).
Deze begrippen hebben betrekking op de documentstructuur. Dit wil zeggen dat child elementen de eigenschappen van hogere parent elementen overnemen of erven.

Duidelijkheid door voorbeeld.

Een gewone Xhtml structuur

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//DUT"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Wij maken een blog.</title>
</head>
<body>
<h1>Een titel heading 1</h1>
<p>Een alinea met gewone tekst.</p>
<h2>Een titel heading 2</h2>
<p>Nog een alinea tekst met een <a href="">link</a></p>
<div>
<ul>
<li>Lijst item 1 in een div</li>
<li>Lijst item 1 in een div</li>
<li>Lijst item 1 in een div</li>
<li>Lijst item 1 in een div <a href="">met link</a></li>
</ul>
</div>
<p>Afsluitende alinea tekst</p>
</body>
</html>

Als je de voorbeeld pagina wenst te bekijken.

Wie zijn de parents en wie de children

In het voorbeeld zijn enkele parents en childs, maar wie is nu wat:

  1. Het eerste element in het voorbeeld is html, ook wel de root genoemd. Deze is aller parent.
  2. De parent html heeft 2 directe children: head en body
  3. De head heeft ook een children, de title
  4. Ook de body heeft enkele children: h1, h2, p, div en ul
  5. Verder heeft de p nog als children de a, en de div als children de ul en a
  6. Ook de ul die children is, is ook parent van 4 li, en de li is dan weer de parent van een a

Is je hoofd nu al op hol ? goed dan wordt het nu erger:

Waarom dat nu allemaal

Zodat het een beetje duidelijker wordt hoe de documentstructuur ineenzit, alvorens over te gaan naar inheritance.

Zoals reeds gezegd nemen children het over van hun parents, dus als we de eerste parent HTML voorzien van opmaak via CSS:

body {
font-family: Georgia;
font-size: 15px;
color: #F00;
}

Dan hebben alle onderliggende children deze eigenschap ook voorbeeld, dat is inheritance oftewel: erfelijkheid.

Als je nu in je ul een ander lettertype wenst, moet je de eerste CSS bepaling over-rulen, dus een tweede bepaling moet schrijven in je CSS, want er geldt de regel:

“de tweede declaratie heeft voorang op de eerste”.

Dus we passen aan

body {
font-family: Georgia;
font-size: 15px;
color: #F00;
}
ul {
font-family: Verdana;
font-size: 10px;
color: #00F
}

Voor de duidelijkheid zijn de kleuren anders, om het verschil te zien in het 3de voorbeeld.

Het is je misschien al zelf opgevallen dat de a die een child is van de ul nu ook de nieuwe bepaling overneemt, maar de a in de p niet daar deze geen child is van de ul.

Besluit

Het weten wie wanneer child en wie wanneer parent is heeft het voordeel dat je nu gemakkelijker kunt bepalen als er afwijkende opmaak moet gemaakt worden. Zo kan je bijvoorbeeld bepalen dat links in een ul een andere kleur hebben als die links die zich gewoon in het document bevinden.