HTML and CSS Reference
In-Depth Information
Chapter 6
Relationship selectors
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.
HTML hierarchy
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:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Example</title>
</head>
<body>
<h1>Heading</h1>
<p>Paragraph</p>
</body>
</html>
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
.
