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 */
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.
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:
<span>First child</span>
Search WWH ::

Custom Search