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.
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.
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:
Search WWH ::

Custom Search