HTML and CSS Reference
In-Depth Information
These four pseudo-classes need to appear in the proper order when applied to the
same selector. Specifically, the
:hover
pseudo-class must come after
:link
and
:visited
,
and for
:active
to work it must appear after
:hover
. The phrase “love and hate” can be
used as a reminder for the initial letters that make up the correct order.
a:link {} /* L */
a:visited {} /* V */
a:hover {} /* H */
a:active {} /* A */
focus
The last dynamic pseudo-class is
:focus
, which can be used on elements that can receive
focus, such as the form
<input>
element. The difference between
:active
and
:focus
is that
:active
lasts only for the duration of the click, whereas
:focus
lasts until the
element loses focus.
input:focus {}
Browser support for the
:focus
pseudo-class in IE was not added until version 8.
Structural pseudo-classes
The structural pseudo-classes target elements based on their relation with other
elements. CSS 2 included only one structural pseudo-class in this category,
:first-child
, whereas CSS 3 introduced a wide array of new ones. The CSS 3 structural
pseudo-classes are supported in all major browsers, except for IE7 and below.
first-child
The
:firs
t-child pseudo-class matches the first child of the selected element.
p:first-child {} /* first paragraph child */
In the following example, this rule applies to the first anchor element:
<p>
<span>First child</span>
<span>Text</span>
</p>
