|
|
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:
The document tree diagram for the sample above would be:
Code:
<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 - Ancestor
An ancestor refers to any element that is connected but further up the document tree - no matter how many levels higher. In the diagram below, the <body> element is the ancestor of all other elements on the page.
The Document Tree - Descendant
A descendant refers to any element that is connected but lower down the document tree - no matter how many levels lower. In the diagram below, all elements that are connected below the <div> element are descendants of that <div>.
The Document Tree - Parent - Child
A parent is an element that is directly above and connected to an element in the document tree. In the diagram below, the <div> is a parent to the <ul>.
A child is an element that is directly below and connected to an element in the document tree. In the diagram above, the <ul> is a child to the <div>.
The Document Tree - Sibling
A sibling is an element that shares the same parent with another element. In the diagram below, the <li>'s are siblings as they all share the same parent - the <ul>.
The Document Tree - Multiple Descriptions
Within your own family tree, you can be described in many ways. You are a descendant of your ancestors and are a child of your parents. You may also be a parent (if you have children), and a sibling (if you have brothers or sisters).
In the same way, elements on an HTML page have multiple descriptions. In the diagram below, one of the two <div> elements is highlighted. It can be described as:
- a child of the <body> element
- a parent of the <ul> element
- an ancestor of the <ul> and <li> elements
- a sibling of the other div element (who shares the same parent - the <body> element).
 |
IP Logged
|
 I am a Lazy Coder. |
