HTML and CSS Reference
In-Depth Information
TAB LE 1.3
CSS Selectors Reference
(continued)
SELECTOR
EXAMPLE
DESCRIPTION
BROWSER
SUPPORT
Structural
pseudo-classes
(continued)
Selects the specified element if it is the only one of
its type inside its parent.
Not IE8 or
earlier
.
section p:only-of-type
:empty
Selects an element only if it has no children.
Not IE8 or
earlier.
Pseudo-elements
Selects the first letter inside an element. It's perfect
for making drop caps!
Not IE6 or
earlier.
p:first-letter
p:first-line
Selects the first line of text inside an element.
This is good for giving an intro paragraph an inter-
esting look—for example, putting the first line in
small caps.
Not IE6 or
earlier.
a
:before
Allows you to generate content before the specified
element—for example, adding icons before certain
content.
Not IE7 or
earlier.
a:after
Allows you to generate content after the specified
content—for example, placing a copyright symbol
after certain pieces of content.
Not IE7 or
earlier
.
NOTES:
The word All in Table 1.3 means all the browsers you'll likely need
to support in most projects.
Some interesting new selector developments are in the CSS4 Selectors
module, so keep checking
www.w3.org/TR/selectors4
for the latest.
Let's move forward and look at a few cases in point to illustrate why CSS3
selectors are useful.
