HTML and CSS Reference
Relationship selectors match elements based on their relation with other elements.
To understand these selectors, it is important to recognize how elements in a web
document are related to each other.
An HTML document can be visualized as a tree with the <html> element as the root.
Each element fits somewhere on this tree, and every element is either a parent or a child
of another element. Any element above another one is called an ancestor, and the element
directly above is the parent. Similarly, an element below another one is called a descendant,
and the one directly below is a child. In turn, an element sharing the same parent as
another element is called a sibling. Consider the following simple HTML 5 document:
In this example, <h1> and <p> are sibling elements because they share the same
parent. Their parent element is <body> , and together with <html> , they are both ancestors
to the sibling elements. In turn, the two sibling elements are child elements of <body>
and descendants of both <body> and <html> . The hierarchy of this simple document is
illustrated in Figure 6-1 .