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:
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 <div> element are descendants of that <div>.
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>.
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>.
