The document tree - it's a family thing

All HTML documents are trees. Each level of the tree is described in the same manner as a human family tree, with ancestors, descendants, parents, children and siblings. CSS rules are based on the document tree. If you understand the document tree concept, then CSS selectors will be easy to understand and apply.

Let's start with a sample of HTML. This sample doesn't include the head or title, as we are focussing on what is inside the body:

<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>

The document tree diagram for the sample above would be:

tree.gif

Ancestor »

Other Max Design articles and presentations
Associated with webstandardsgroup.org