HTML and CSS Reference
In-Depth Information
rightmost element, that element must be a descendant of the previous
element. This is easier to understand with an example. Consider this
fragment of
HTML
:
<h1>A <em>heading</em></h1>
<p>A paragraph <em>with emphasis</em></p>
Now look at these two style rules, both of which select
<em>
elements:
em { color: teal; }
p em { color: darkgreen; }
The second rule selects only those
<em>
ele-
ments that appear as children of a
<p>
ele-
ment. In this example, the first
<em>
(a child of
the
<h1>
element) is teal, but the second
<em>
(a child of the
<p>
element) is dark green. The
second rule is more specific than the first one,
so it will be preferred whenever both apply.
More on this in the next section. In the meantime, you need to learn
about the child combinator.
The
child combinator
is a greater-than bracket:
>
. It allows you to select
elements that are direct children of a parent. Because you can already
select according to ancestor elements, you might be wondering why
you also need a child combinator, so let's look at an example. Here's a
simple
HTML
document:
<header>
<h1>Header</h1>
</header>
<article>
<h1>Article</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<footer>Article footer</footer>
</article>
<footer>
Body footer
</footer>
