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:
<p> I have a yellow background </p>
<div><p> I do not have a yellow background. </p></div>
p strong {background-color: yellow;}
Yellow - Direct Descendent
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;}
Red - Adjacent to h1
Not Red - Not Adjacent to h1
Search WWH ::

Custom Search