Each HTML document can actually be referred to as a document tree. We describe the elements in the tree like we would describe a family tree. There are ancestors, descendants, parents, children and siblings.
This 'tree' is actually what is called the Document Object Model, or more commonly just the DOM.
It is important to understand the DOM because CSS selectors use the tree.
Use the sample HTML document below for these examples. The <head> section of the document is omitted for brevity.
<body>
<section class="main-content">
<h1>Heading here</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor <em>sit</em> amet.</p>
<hr />
</section>
<nav class="main-nav">
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
</nav>
</body>A diagram of the above HTML document tree would look like this.
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.
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 <nav> element are descendants of that <nav>.
A parent is an element that is directly above and connected to an element in the document tree. In the diagram below, the <nav> 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 <nav>.
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>.