HTML and CSS Reference
In-Depth Information
Selector
Description
Example
:nth-of-
type(
n
)
Selects the element that is
the nth child of its parent
that is its type.
strong:nth-of-type(5) {text-
decoration: underline;}
/* underlines the fifth strong tag
under a parent */
:only-child
Selects an element if it's
the only child of its parent.
h1:only-child {color: blue;}
/* sets the h1 color to blue if the
h1 is the only child of its parent */
:only-of-type
Selects an element if it's
the only child of its parent
with its type.
p:only-of-type {font-weight: bold;}
/* sets the p element to be bold if
it is the only p tag child of its
parent */
:root
Selects the element that is
the root of the document.
:root {background-color: blue;}
/* sets the background color to blue
for the root element */
::selection
Selects the part of the
element that is currently
selected. Supported
in Firefox as
::-moz-
selection
as well.
Use to set
color
and
background-color
(or
background
) only with
this selector.
#test::selection {color: red;
background-color: yellow;}
/* makes the text red with a yellow
background when selected */
:target
Selects the element that
is the target of a referring
URI.
:target{color:red;}
/* if the element is the target of
the referring URI, the color is set
to red */
T
ABLE
6-2 CSS3 Selectors (continued)
Emerging CSS3 Selectors
CSS3 also defines a number of form element-focused selectors outside of the core selector
specification. At the time of this edition's writing, some of these features have been partially
implemented in Firefox 3.
x
and Opera 10 browsers, and it's likely others will follow soon.
The specification for these features is far from set as they rely on HTML5 form element
syntax, which is still in flux, so the primary selectors summarized in Table 6-3 should serve
as only an introduction to the syntax. Check the topic's support site or the particular
standard in question for the latest information.
It is interesting to see that many JavaScript libraries were the first places to implement
CSS3 selector syntax to make it easy to filter a document's DOM tree for interesting nodes.
It's been the author's experience that, so far, most Web developers learn some of the
advanced selectors through JavaScript rather than in CSS, but hopefully over time that will
change as these selectors become supported by all browsers.
