HTML and CSS Reference
In-Depth Information
Direct Descendent Selector
CSS2 introduced the child selector specified by the greater than symbol (
>
) to form a rule
to match only elements that are directly enclosed within another element. Consider the
following rule:
body > p {background-color: yellow;}
Here we find that only paragraphs that are the direct children of the
body
element have a
yellow background:
<body>
<p>
I have a yellow background
</p>
<div><p>
I do not have a yellow background.
</p></div>
</body>
p strong {background-color: yellow;}
body
p
Yellow - Direct Descendent
div
p
Not Yellow - Not Direct Descendent
Adjacent Sibling Selectors
A similar rule called the
adjacent-sibling selector
is specified using the plus sign (
+
) and is
used to select elements that would be siblings of each other. For example, consider the
following rule:
h1 + p {color: red;}
This states that all paragraph elements that are directly after an
<h1>
are red, as indicated
by this markup:
<h1>
I am a heading
</h1>
<p>
I am an adjacent paragraph so I am red!
<
/
p>
<p>
I am not adjacent so I am not red.
</p>
h1 + p {color: red;}
body
h1
p
Red - Adjacent to h1
p
Not Red - Not Adjacent to h1
