01_Inheritance

Code-Dateien

DateinameAktion
CODECode_Inheritance.zipDownload

Lernmaterialien

Vererbung Inheritance

DOM Tree

Der DOM Tree (Document Object Model) ist die Baumstruktur, in der der Browser ein HTML- oder XML-Dokument intern darstellt, damit JavaScript (und auch CSS) es lesen und verändern kann.

Grundidee

  • Ein HTML-Dokument besteht aus verschachtelten Elementen.

  • Diese Verschachtelung wird im DOM als Knoten (Nodes) in einem Baum abgebildet.

  • Jedes Element wird zu einem Knoten: z. B. <html>, <body>, <p>, aber auch Text in einem Element ist ein eigener Knoten (Text Node).

Typische Baumstruktur

Nehmen wir dieses HTML:

<html>
  <body>
    <h1>Titel</h1>
    <p>Hallo <b>Welt</b></p>
  </body>
</html>

Dann sieht der DOM Tree vereinfacht so aus:

Document
└── html
    └── body
        ├── h1
        │   └── #text "Titel"
        └── p
            ├── #text "Hallo "
            └── b
                └── #text "Welt"

Wichtig: Text ist ein eigener Knoten (#text) – das wird oft vergessen.

Begriffe im DOM Tree

  • Root: oberster Knoten, meist document (bzw. Document)

  • Parent (Eltern): z. B. body ist Parent von h1 und p

  • Child (Kind): h1 ist Child von body

  • Siblings (Geschwister): h1 und p sind Geschwister, weil sie denselben Parent haben

Warum ist das wichtig?

Weil du damit:

  • Elemente finden kannst (querySelector, getElementById, …)

  • Inhalte ändern kannst (textContent, innerHTML, Attribute)

  • Knoten hinzufügen/entfernen kannst (append, remove)

  • Styles dynamisch anpassen kannst (direkt oder über Klassen)

Mini-Beispiel (DOM manipulieren)

const p = document.querySelector("p");
p.textContent = "Neuer Text!";

Hier greift JS in den DOM Tree ein und ersetzt den Text-Knoten im <p>.

Inheritance

Inheritance (Vererbung) bedeutet in CSS: Manche CSS-Eigenschaften, die auf ein Element gesetzt werden, werden automatisch von seinen „Kindern“ übernommen – und das passt genau zur Parent/Child-Struktur im DOM Tree.

Inheritance im DOM Tree

Im DOM ist jedes Element ein Knoten mit Parent (Eltern) und Children (Kinder).
Wenn CSS-Eigenschaften vererbbar sind, „fließen“ sie im Baum von oben nach unten:

Document
└── html
    └── body
        └── p
            ├── #text "Hallo "
            └── b
                └── #text "Welt"

Wenn du z. B. body { color: blue; } setzt, dann wird diese Textfarbe im Normalfall auch in p, b und im Textknoten sichtbar, weil color vererbbar ist.

001.png

Beispiel

<body>
  <p>Hallo <b>Welt</b></p>
</body>
body { 
  color: blue; 
  font-family: Arial;
}

Ergebnis:

  • p und b erscheinen blau und in Arial, obwohl sie selbst kein color oder font-family gesetzt haben.

  • Das ist Inheritance.

Wichtig: Nicht alles wird vererbt

Viele Eigenschaften werden nicht vererbt – besonders Layout/Box-Modell:

Typisch vererbbar (häufige Beispiele):

  • color

  • font-family, font-size, font-style, font-weight

  • line-height

  • text-align

  • visibility

Typisch nicht vererbbar:

  • margin, padding, border

  • width, height

  • background, background-color

  • display, position

Beispiel:

body { background: yellow; }

➡️ Der Hintergrund ist nicht „vererbt“ an jedes Kind, sondern der Body-Hintergrund „liegt“ einfach hinter dem Inhalt. (Darum wirkt es manchmal so, als wäre es vererbt.)

Override

Bei CSS bedeutet „überschreiben“, dass für dieselbe Eigenschaft am Ende ein anderer Wert gilt als ein zuvor gesetzter — weil eine andere CSS-Regel gewinnt.

Das passiert durch die Cascade (die „Regel-Auswahl“ in CSS). Wichtig: Überschreiben ist nicht Vererbung, sondern Konfliktlösung, wenn mehrere Regeln auf dasselbe Element wirken.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="01_style.css">
</head>
<body>
    <p>Hallo <b>Welt</b></p>
    <p>Hallo <b>Thomas</b></p>
    <p>Hallo <b>Andrea</b></p>
    <article>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui ad sit ducimus? Expedita est esse, ipsa, aut nihil culpa nesciunt ullam obcaecati consequatur doloremque quam quasi accusamus sint temporibus similique.
    </article>
</body>
</html>
body { 
  color: blue; 
  font-family: Arial;
}

b {
  color: red;
}

article {
  color: green;
}

body { color: blue; } → Vererbung

  • color ist vererbbar.

  • Also erben p und auch b erstmal blau, wenn sie selbst keine Farbe setzen.

➡️ Ohne extra Regel wäre alles blau.

b { color: red; } → Überschreiben

  • Hier bekommt b explizit color: red.

  • Das überschreibt den geerbten Wert blue von body.

➡️ Ergebnis:

  • „Hallo “ ist blau

  • „Welt/Thomas/Andrea“ (in <b>) ist rot

article { color: green; } → gilt nur im <article>

  • Der Text im <article> wird grün (auch durch Vererbung innerhalb von article weiter nach unten, falls dort Kinder wären).

Cascading

CSS Cascade (Kaskade) heißt einfach:
Wenn mehrere CSS-Regeln auf dasselbe Element passen und dieselbe Eigenschaft setzen (z. B. color), dann entscheidet der Browser: Welche Regel gilt am Ende?

Mini-Beispiel

p { color: blue; }
p { color: red; }

➡️ Das <p> wird rot, weil die zweite Regel die erste „überstimmt“.

Wie entscheidet der Browser?

!important gewinnt fast immer

p { color: blue !important; }
p { color: red; }

➡️ blau

Die genauere Regel gewinnt

  • #id ist genauer als .klasse

  • .klasse ist genauer als p

p { color: blue; }
.text { color: red; }
<p class="text">Hallo</p>

➡️ rot (weil .text genauer ist als p)

Wenn gleich genau: die spätere Regel gewinnt

.text { color: blue; }
.text { color: red; }

➡️ rot (weil später)

Beispiel

index.html

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>CSS Inheritance Example</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <main>
    <h1>Inheritance Example</h1>

    <p>
      This is a paragraph with a 
      <span>highlighted word</span>.
    </p>

    <p>
      Another paragraph with a 
      <a href="#">link</a>.
    </p>
  </main>

</body>
</html>

style.css

/* Parent element */
main {
  font-family: Arial, sans-serif;
  color: darkblue;
  line-height: 1.6;
}

/* Child element overrides inheritance */
span {
  color: red;
  font-weight: bold;
}

/* Link inherits color from parent */
a {
  color: inherit;
  text-decoration: underline;
}

🧠 Was passiert hier? (Schritt für Schritt)

1️⃣ Vererbung vom Elternelement (main)

main {
  font-family: Arial, sans-serif;
  color: darkblue;
}

➡️ Alle Kindelemente von <main> erben automatisch:

  • Schriftart (font-family)

  • Textfarbe (color)

  • Zeilenhöhe (line-height)

Das betrifft:

  • <h1>

  • <p>

  • <span>

  • <a>

2️⃣ Kindelement übernimmt die Vererbung (p, span)

<p>This is a paragraph with a <span>highlighted word</span>.</p>

  • <p> erbt Schrift + Farbe von <main>

  • <span> erbt ebenfalls alles

➡️ Standardmäßig ist alles dunkelblau.

3️⃣ Vererbung gezielt überschreiben (span)

span {
  color: red;
  font-weight: bold;
}

➡️ Das <span>:

  • erbt zuerst darkblue

  • wird dann überschrieben → red

Das zeigt:

Vererbung kann durch eigene CSS-Regeln überschrieben werden.

Browser geben Links eine eigene Farbe (blau).

a {
  color: inherit;
}

➡️ inherit bedeutet:

„Nimm die Farbe deines Elternelements.“

Der Link wird also auch dunkelblau statt Standard-Blau.

🔍 DOM-Struktur (wichtig für Vererbung)

main
├── h1
├── p
│   └── span
└── p
    └── a

➡️ Vererbung folgt immer der DOM-Hierarchie.

❌ Was hier NICHT vererbt wird

  • margin

  • padding

  • border

  • background-color

Diese Eigenschaften müssten explizit gesetzt werden.