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.
Figure 6-1
Example HTML hierarchy
Inheritance
Inheritance is another important concept in CSS. It makes certain styles apply not only to the specified element but also to all its descendant elements. For example, the color property is inherited by default, whereas the border property is not. This is usually the intended behavior, making inheritance very intuitive to use. Any property can explicitly be given the value inherit to use the same value as the one the parent element has for that property.
/* Inherit parent’s border */
p { border: inherit; }
Inheritance enables you to apply a style to a common ancestor whenever you find a place in which every descendant element needs that same style. This process is more convenient and maintainable than applying the style to every descendant element that needs a specific style. For example, if the text for an entire document needs to be set to a particular color, you can apply the style to the <body> element, which is the common ancestor for all visible elements.
/* Set document text color to gray */
body { color: gray; }
Now that you have an understanding of the HTML hierarchy and the inheritance concept, the relationship selectors of CSS can be discussed.
Adjacent Selector
The adjacent sibling selector selects the second element if it comes directly after the first element.
div+p { color: red; }
This selector matches paragraphs that follow <div> elements.
<div>Not red</div>
<p>Red</p>
<p>Not red</p>
Descendent Selector
The descendent selector matches an element if it is the child or grandchild of another element. It is useful when you want to apply a style to an element only when it resides within another element.
div p { background: gray; }
The preceding rule applies to the following paragraph because it descends from a <div> element:
<div>
<p>Gray</p>
</div>
Direct Child Selector
The direct child selector matches its second element if it is the immediate descendant of its first element.
div > span { color: green; }
When applied to the following markup, this rule will color the second <span> element green. The first <span> element is not colored because it is not a direct child of <div>.
<div>
<p>
<span>Not green</span>
</p>
<span>Green</span>
</div>
General Sibling Selector
CSS 3 added the general sibling selector, which matches the second element only if it is preceded by a sibling element of the first type.
h1~p { color: blue; }
In the following example, the last two paragraphs are selected because they are preceded by <h1> and all share the same parent:
<p>Not blue</p>
<h1>Not blue</h1>
<p>Blue</p>
<p>Blue</p>
The general sibling selector is supported by all major browsers, including Chrome 1+, Firefox 3.5+, Safari 3.2+, Opera 10+, and IE 7+.
