HTML and CSS Reference
In-Depth Information
Selector
Description
Example
:enabled
Selects the elements that
are currently enabled.
input:enabled {background-color:
white;}
/* sets the background color to white
on enabled input elements */
::first-letter
Same as
:first-
letter
; changed under
CSS3 to make pseudo-
elements obvious.
p::first-letter {font-size: larger;}
/* makes the first letter of a
paragraph larger */
Same as
:first-line
;
changed under CSS3 to
make pseudo-elements
obvious.
::first-line
p::first-line {color: red;}
/* makes the first line of paragraph
red */
:first-of-type
Selects the element that is
the first child of its parent
that is of its type.
strong:first-of-type {font-size:
bigger;}
/* sets the font size bigger on the
first strong tag of its parent */
:last-child
Selects the element that is
the last child of its parent.
p:last-child {font-size: small;}
/* sets the font size to small on the
p tags that are the last child of
their parent */
:last-of-type
Selects the element that is
the last child of its parent
that is of its type.
strong:last-of-type {font-size:
smaller;}
/* sets the font size smaller on the
last strong tag of its parent */
:not(
s
)
Selects elements that do
not match the selector s.
*:not(h1) {color: black;}
/* sets the color to black on every
element that is not an h1 tag */
:nth-child(
n
)
Selects the element that is
the nth child of its parent.
div:nth-child(2) {background-color:
red;}
/* sets the background color to red if
the div is its parent's second child */
:nth-last-
child(
n
)
Selects the element that
is the nth-from-last child of
its parent.
p:nth-last-child(3) {color: yellow;}
/* sets the color to yellow if the p
element is its parent's third to last
child */
:nth-last-of-
type(
n
)
Selects the element that
is the nth-from-last child of
its parent that is its type.
p:nth-last-of-type(2) {color: purple;}
/* sets the color to purple on the
second to last p element of its
parent */
T
ABLE
6-2 CSS3 Selectors (continued)
