HTML and CSS Reference
In-Depth Information
he focus pseudo-class is used in a similar way to select elements when they
have focus. Typically, this applies to
input
and other form elements when the
user's cursor is positioned in the element and text can be entered from the
keyboard into the element. he following CSS statement gives a light-yellow
background only to the text input element that currently has the keyboard's
focus. his is a nice user interface feature, especially when you present the user
with a long form that has many
input
elements:
input[type="text"]:focus
{ background-color: #ffff99; }
Other elements can have keyboard focus. Anchor elements, for example,
can have focus if the browser permits the user to press the Tab key to move
sequentially through page links.
he
first-child
pseudo-class selects an element if it is the irst child of its
parent element. Example 3.2 illustrates this feature using a simple horizontal
list of links. Figure 3.2 shows how this HTML appears in a browser.
Example 3.2: The
first-child
pseudo-class
<!DOCTYPE html>
<html>
<head>
<title>Example 3.2</title>
<style type="text/css">
body { font-family: sans-serif; }
a { text-decoration: none; }
/* don't underline links */
li { float: left;
/* horizontal list */
padding: .25em;
margin-right: 5px;
border: 2px black outset;
/* shaded buttons */
list-style-type: none; }
li:first-child { background-color: black; }
li:first-child a { color: white; }
</style>
</head>
<body>
<ul>
continues
