HTML and CSS Reference
In-Depth Information
the nested
<strong>
tag will still have a yellow background even though it is not directly
within the
<p>
tag. What you are seeing here is that the rule really says that all
<strong>
tags that are “descendents” of a
<p>
tag are given a yellow background:
p strong {background-color: yellow;}
body
Not Yellow
Not Descendent of P
div
strong
body
Yellow
Direct Descendent
p
strong
body
Yellow
Indirect descendent
p
span
strong
Descendent selection is not limited to a single level, nor does it require just generic
element selection; for example, here we say that links inside of unordered lists found inside
of the
div
element with the
id
of “nav” should have no underlines:
div#nav ul a {text-decoration: none;}
It is also possible that using a wildcard selector may be useful with contextual selection.
The rule
body * a {text-decoration: none;}
would select only
<a>
tags that are descendents of some tag found under the
body
element.
While using multiple elements together can be quite powerful, more specific selections
require other CSS selector syntax.
