HTML and CSS Reference
In-Depth Information
would get a green background color only when the current URL includes the fragment
identifier
#top
.
Try the example online if you are still unsure of how the element works.
O
NLINE
http://htmlref.com/ch4/target.html
Activity Related Pseudo-Classes—:hover and :focus
There are other pseudo-classes related to user activity, most notably
:hover
and :
focus
.
The
:focus
pseudo-class is used to apply a rule to an element only when that element has
focus. Typically, form fields can accept keyboard input and thus can gain focus. So to set
any text input field to have a yellow background color when it gains focus, you would use a
rule such as the following:
input[type=text]:focus {background-color: yellow;}
The
:hover
pseudo-class, as discussed in the previous section, is used primarily to change
the appearance of links when the user's pointer is hovering over them:
a {text-decoration: none;}
a:hover {text-decoration: underline;}
However, it is possible to apply this pseudo-class to just about any element, so a rule such as
p:hover {background-color: yellow;}
is perfectly valid, although it produces a potentially annoying effect and not everybody's
browser has support for this selector on all elements.
The following is a simple example demonstrating these pseudo-class selectors:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>
Hover and Focus Pseudo-Class Example
</title>
<style type="text/css" media="screen">
.annoy:hover {border-style: dashed; background-color: yellow;}
input[type=text]:hover {background-color: yellow; }
input[type=text]:focus {background-color: #FFA500;}
</style>
</head>
