HTML and CSS Reference
In-Depth Information
}
2.
Save styles.css.
The :visited
styles indicate—you guessed it—a link that has been visited. When you make this link a different
color, a user can quickly scan a page he is returning to should he wish to find where he navigated previously.
The
:active
style is applied when an element is activated by the user—that is, when the user presses the mouse
button down on a link. Hold down your mouse button on a link, and you see its color change to red, until you release
the mouse button.
Focus is when an interactive element is deemed to have the user's attention—when an input text box is clicked, for
example. With the
:focus
pseudo-class, you add a very important style: the
outline
property. It may not seem
that important at the moment, but it's crucial for accessibility. You take a deeper look at
outline
and its import-
ance in Chapter 5.
It's possible for elements to have more than one pseudo-class at a time. A link can be both
:visited
and
:act-
ive,
for example. If you want to style a link such as that, you could use the following:
a:visited:active {
color: orange;
}
Structural Pseudo-Classes
Structural pseudo-classes are used when you want to select elements based on generic criteria, such as the second
<p>
element amongst three.
Selecting Child Elements
The pseudo-class
:nth-child()
allows you to select a particular child element based on its position relative to its
siblings within a parent element:
p:nth-child(1) {
background-color: lightblue;
}
You should place an argument within the parentheses of
:nth-child()
to specify an element that is the
n
th ele-
ment relative to its siblings; this can be either a number or the words
odd
or
even
. By selecting only odd or even
elements, you can create an alternating color for rows within a table, for example (making the table easier to scan
with the eye). Figure 3-3 shows this style applied to the Cool Shoes & Socks page.
