HTML and CSS Reference
In-Depth Information
TAB LE 1.3
CSS Selectors Reference
(continued)
SELECTOR
EXAMPLE
DESCRIPTION
BROWSER
SUPPORT
Structural
pseudo-classes
Styles the root element of the document, which is
pretty much always
<html>
!
Not IE8 or
earlier.
:root
li:nth-child(2n+1)
In a series of child elements, styles the elements
specified by the formula in the parentheses. So,
for example, this formula would select all odd-
numbered list items (1, 3, 5, etc.). It's great for zebra
striping to enhance readability.
Not IE8 or
earlier.
Works the same as
nth-child
but starts at the last
element and works backwards.
Not IE8 or
earlier.
li:nth-last-child(2n+1)
p:nth-of-type(3)
Works the same as nth-child but ignores elements
not of the type specified. I usually use this just to
select a single child element or a certain type.
Not IE8 or
earlier.
Works the same as nth-of-type
,
except that it
counts backwards from the last child element.
Not IE8 or
earlier.
:nth-last-of-type(1)
Selects the first child in a series of child elements, if
it is of the type specified.
Not IE8 or
earlier.
p:first-child
p:last-child
Selects the last child in a series of child elements, if
it is of the type specified.
Not IE8 or
earlier.
Selects the first child of that type in a series of child
elements.
Not IE8 or
earlier.
p:first-of-type
p:last-of-type
Selects the last child of that type in a series of child
elements.
Not IE8 or
earlier.
Selects the only child of an element if it is of the
type specified. This is useful if, for example, you
want to give list items a special styling only if there
is one list item present. You might want to omit the
bullet point because it is pointless and looks silly if
there is only one bullet!
Not IE8 or
earlier.
li:only-child
continues on next page
