Alle HTML-Dokumente sind Bäume. Jede Ebene des Baums wird genauso beschrieben wie in einem Stammbaum einer Familie, mit Vorfahren, Nachfahren, Eltern, Kindern und Geschwistern. CSS-Regeln basieren auf diesem Dokumentenbaum. Wenn Sie das Dokumentenbaum-Konzept verstehen, werden CSS-Selektoren einfach zu verstehen und anzuwenden sein.
Beginnen wir mit einem Beispiel in HTML. Dieses Beispiel enthält weder <head> noch <title>, da wir uns darauf konzentrieren wollen, was im <body> steht:
<body>
<div id="content">
<h1>Heading here</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor <em>sit</em> amet.</p>
<hr>
</div>
<div id="nav">
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
</div>
</body>
Das Diagramm des Dokumentenbaums für das obige Beispiel würde wie folgt aussehen:
Ein ancestor bezieht sich auf jedes Element, was zwar mit dem aktuellen verbunden ist, sich jedoch weiter höher im Dokumentenbaum befindet – es spielt dabei keine Rolle wieviele Ebenen höher es sich befindet. Im folgenden Diagramm ist das <body>-Element der ancestor aller anderen Elemente der Seite.
Ein descendant bezieht sich auf jedes Element, welches zwar mit dem aktuellen verbunden ist, sich jedoch tiefer im Dokumentenbaum befindet - egal wieviel tiefer. Im folgenden Diagramm sind alle Elemente, die sich unterhalb des <div>-Elementes befinden descendants dieses <div>s.
Ein parent ist ein Element, was mit dem aktuellen verbunden ist und sich im Dokumentenbaum direkt über diesem befindet. Im folgenden Diagramm ist das <div> ein parent von dem <ul>.
Ein child ist ein Element, was mit dem aktuellen verbunden ist und sich im Dokumentenbaum direkt unterhalb befindet. Im obigen Diagramm ist das <ul>-Element ein child des <div>-Elements.
Ein sibling ist ein Element, welches die gleichen Eltern mit einem anderen Element teilt. Im folgenden Diagramm sind die <li>-Elemente siblings, da sie alle das gleiche parent teilen – das <ul>-Element.
