Web Design in a Nutshell, 3rd Edition

The parent-child relationship

The document tree becomes a family tree when it comes to referring to the relationship between elements. An element that is directly contained by another element is said to be the child of that element. In Figure 16-2, the p element is the child of body, and body is said to be its parent. Elements that have the same parent are called siblings . In the example, the li element is the child of ol, its parent, and the other li elements are its siblings. This parent-child relationship is fundamental to how CSS works.

Notice in the example that the p element contains an a element, which in turn contains the inline element strong. Technically, the strong element is contained by the p element as well. All the elements a given element contains are said to be its descendants . To be considered a child, an element needs to be directly under its parent element in the hierarchy (therefore, a child is just a special kind of descendant). As you might expect, the terminology extends in the other direction as well, as all elements higher than a particular element in the hierarchy are known as its ancestors. The root element is called the root element because it has no ancestors.

This may all seem academic, but as you’ll see, an awareness of the structure tree of your document comes into play in practical ways when working with CSS.