CSS 101 | Part Five - The Document Tree
Before we progress with CSS, you need to learn about a little thing called the document tree. The document tree describes the hierarchy of an (X)HTML page. It's useful to know the names of its constituents because you may need these when styling up your pages.
The Document Tree
Here is a basic XHTML page, with each element of the document tree explained below.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>My Title</title>
<link href="styles.css" rel="stylesheet" media="all" />
</head>
<body>
<div id="container">
<div id="top">
<ul id="nav">
<li><a href="/home" title="Home">Home</a></li>
<li><a href="/about" title="About">About</a></li>
</ul>
</header>
<div id="main">
<p>Paragraph One</p>
<p>Paragraph Two</p>
</div>
</div>
</body>
</html>
Parent Elements
The parent element is the element which directly contains an element. For instance, if we have a div called main (don't worry we'll get onto the div tag later) and within main we have a paragraph called intro, main is the parent of intro and the elements directly inside main are its children.
Let's find the parent elements in our example page above.
htmlis the parent ofheadandbody.headis the parent oftitleandlink.bodyis the parent ofcontainer.containeris the parent oftopandmain.topis the parent ofnav.navis the parent of the twolitags.mainis the parent of the twoptags.
Child Elements
The child element is an element directly inside another element. For instance, if we have two paragraphs inside a div called container, these would be container's children and container would be the paragraphs' parent element.
Let's see how this relates to our document tree example above.
headandbodyare the children ofhtml.titleandlinkare the children ofhead.containeris the child ofbody.topandmainare the children ofcontainer.navis the child oftop.- The two
litags are the children ofnav. - The two
ptags are the children ofmain.
Ancestor Elements
An ancestor element is above the parent element in the hierarchical chain. If we have a div called container and inside this we have a div called main, and in main we have two paragraphs, container is the ancestor element of the two paragraphs; main is not - main is directly above the two paragraphs, and is therefore their parent element; the two paragraphs are the descendants of container and the children of main.
Below are the ancestor elements in our document tree example.
htmlis the ancestor of all of the elements inside it.bodyis the ancestor of all of the elements inside it.containeris the ancestor of all of the elements inside it.topis the ancestor of all of the elements inside it.
Descendant Elements
A descendant element is an element within an element, within an element. Suppose we have a div called container and in container we have another div called main and in main we have a list, the list is the descendant of container and container is the list's ancestor element.
Here are all the descendant elements in our document tree example.
- All of the elements inside
htmlare its descendants. - All of the elements inside
bodyare its descendants. - All of the elements in
containerare its descendants. - All of the elements in
topare its descendants. - All of the elements inside
mainare its descendants.
Sibling Elements
A sibling element is an element right next to another element. List-items are siblings, two paragraphs next to each other are siblings; elements next to each other in a form are siblings. I won't provide a more complex example as I'm sure you get the idea: an element next to another element is its sibling.
There are only three sibling elements in our document tree example. They are as follows:
titleandlinkare siblings.- The two
litags are siblings. - The two
ptags are siblings.
For more information on the document tree, visit Conformance: Requirements and Recommendations.
Conclusion
That was a quick overview of the document tree. Knowing how the document tree is constructed helps when applying units of measurement to elements, such as percentages and ems, and when using the CSS selectors. In the next instalment I will go over the CSS units of measurement with you. This will be the last text-heavy lesson. After that, there tutorials will feature a lot more examples...and will be a lot more fun, I promise!
Drop me a line
Got any questions? Get in touch via the contact form or email me @ helen@alternategateways.com.
