Websites met stijl

Naslag: erven

Relaties

Elementen nemen eigenschappen over van andere elementen. We spreken dan van erven. Daarbij zijn de relaties tussen elementen van belang. Het is gebruikelijk de engelse termen voor familierelaties te gebruiken: parent, child, descendant, sibling, ancestor.

De voorbeelden hebben betrekking op de figuur.

• Parent (ouder)
  De parent van een element is het omsluitende element. Een element kan maar één parent hebben (bij computers zijn het altijd één-ouder gezinnen ☺)

  De reden is dat een element maar in één ander element kan zitten, zoals een zakdoek ook maar in één zak kan zitten. Dat andere element is de parent.

  Voorbeeld:
  • De parent van link 1 is Nav
• Child (kind)
  De elementen die door een element omsloten worden zijn de kinderen (children) van dat element. Een element kan 0, 1 of meer kinderen hebben. Voorbeelden:
  • De kinderen van div 1 zijn:
    subkop 1, alinea 1, alinea 2, alinea 3 en nav.
  • De kinderen van nav zijn:
    link 1, link 2, link 3 en alinea 4.
    (link 1, link 2, link 3 en alinea 4 zijn geen kinderen van div 1; het zijn wel descendants van div 1.)
  • Alinea 1, alinea 2 en alinea 3 hebben geen kinderen.
• Descendant (nakomeling)
  Descendants zijn de kinderen, de kinderen van de kinderen en daarvan de kinderen (enz.).
  Subkop 1, alinea 1, alinea 2, alinea 3, nav, link 1, link 2, link 3 en alinea 4 zijn dus allemaal descendants van div 1.
• Sibling (broer of zus)
  Siblings (broers en zussen) zijn elementen die dezelfde parent hebben.
  Subkop 1 is sibling van alinea 1, alinea 2, alinea 3, en nav.
• Ancestor (voorouder)
  Ancestors (voorouders) van een element zijn de ouder van een element, en diens ouder, en diens ouder,enz.
  De ancestors van alinea 4 zijn nav en div 1 (en body, want alle elementen staan in de body).

Erven

• Children erven de meeste eigenschappen van de parent. Als de parent rode letters heeft zullen de children dat ook hebben.
• Maar niet alle eigenschappen vererven automatisch. Meestal is dat logisch. Zo wordt een border niet geërfd door de children. Anders zouden alle alinea's in een omkaderde division ook omkaderd worden.
• De children geven in het algemeen de geërfde eigenschappen weer door aan hun children. Je zou dus kunnen zeggen dat alle descendants eigenschappen erven.
  • In de (engelstalige) css-naslag van W3-schools staat bij elke eigenschap of die vererft of niet (inherited: yes of no).
  • Door een eigenschap de waarde inherit te geven, erft die van de parent. p {border: inherit;} Met de bovenstaande stijlregel erft de alinea de eventuele border van de parent.