HTML and CSS Reference
In-Depth Information
Element Selectors
If you've ever written even a single rule in a style sheet, you've used an
element selector
(listed
as
type
selectors in the W3C spec, and sometimes called
tag
selectors), which simply describes
any element name used as a selector. For example,
h1
,
p
,
strong
,
ul
, and
div
are all element
selectors. It's probably safe to assume you don't need a specific example, so let's move along to
the more interesting selectors.
Descendant, Child, and Adjacent Sibling Selectors
Specific levels of ancestry and the relationships between elements are the cornerstones of
CSS. But when it comes to selectors, the family connection between elements can be strong.
These selector types allow you to take advantage of those relationships, just like that aunt of
yours who's always spreading rumors at family cookouts. Again, this stuff has been covered in
Chapter 2 to a large extent, but we're giving you a recap here that will prove useful when we
explain inheritance and the cascade.
Descendants
Perhaps the most common family relationship is the more generic
descendant
selector. These
selectors consist of two or more elements separated by whitespace (which is
technically
a CSS
combinator, according to the W3C). Descendants are any elements contained at any level
below another element, like so:
div h2 {...}
This selector will style any
h2
contained within any
div
. Any
h2
s just sitting within the
body
or
any other container will not be styled by this rule.
Children
Again, as we saw in Chapter 2, the
child
selector consists of two or more elements separated
by a greater-than character (
>
). The child selector allows you to cast a smaller net: only style
elements that are descendants of another element without any other elements in between the
parent and child. For instance, where the descendant selector targets
any
level beneath the
specified parent element:
div h3 {...}
which will style any of these
h3
s:
<div>
<h3>Heading</h3>
</div>
<div>
<ul>
<li>
<h3>Heading</h3>
</li>
</ul>
</div>
