HTML and CSS Reference
In-Depth Information
Selector
Description
Example
Defined In
Selects the element
only when the element
holds the focus
CSS2
:focus
input:focus {background-color:
yellow;}
/* sets the background color to
yellow on the input element that
has focus */
:hover
Selects the element
when the user is
hovering over it
p:hover {background-color: yellow;}
/* sets the background color to
yellow on the p element that the
user is currently hovering over */
CSS2
Selects all elements
that have the
lang
attribute set to the
given value
CSS2
:lang(
value
)
*:lang(fr) {color: blue;}
/* sets the font color to blue
for every element that has the
attribute lang set to 'fr' */
: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 */
CSS3
Selects the element
that is the last child
of its parent that is of
its type
:last-of-type
strong:last-of-type {font-size:
smaller;}
/* sets the font size smaller
on the last strong tag of its
parent */
CSS3
: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 */
CSS3
: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 */
CSS3
: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 */
CSS3
Selects the element
that is the nth-from-last
child of its parent that
is its type
CSS3
:nth-last-of-
type(
n
)
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
5-5
CSS Selectors (continued)
