The :focus pseudo-class

Rarely used due to a lack of browser support, the :focus pseudo-class is worth being
mindful of. It enables you to define the link state of a focused link. Focusing usually occurs
when tabbing to a link, and so the :focus pseudo-class can be a handy usability aid. At the
time of writing, it works in Firefox and Safari, but is ignored in Opera and Internet
Explorer, although Microsoft’s browser does at least surround any focused links with a
dotted line. (Note that Firefox and Safari also surround focused links with a dotted line
and aqua border, respectively.)
The following example, used in editing-link-styles-using-css.css, turns the background
of focused links yellow in compliant browsers:
1 : 

a:focus {
background: yellow;
}

<a href="index.html">Homepage</a> | <a href="products.html">
åProducts</a> | <a href="contact-details.html">Contact
å details</a>
</div>

2. Add some padding to the existing body rule in the CSS to add some spacing around
the page content:
body {
font: 62.5%/1.5 Verdana, Arial, Helvetica, sans-serif;
padding: 30px;
}

3. Add some rules to define the main states for links on the web page. The following
rules color links orange, change them to red on the hover state, make them gray
on the visited state, and make them black on the active state.
a:link {
color: #f26522;
}
a:visited {
color: #8a8a8a;
}
a:hover {
color: #f22222;
}
a:active {
color: #000000;
}

4. Next, style the navigation links. Contextual selectors are used to style the links
within the navigation div.
#navigation a, #navigation a:visited {
text-decoration: none;
font-weight: bold;
color: #666666;
text-transform: uppercase;
}
#navigation a:hover {
text-decoration: underline;
}
The first rule removes the underline from all links within the navigation div, renders
them in bold and uppercase, and colors them a medium gray. The second rule
brings back the underline on the hover state.

5. Style the footer links. Add another contextual selector to style the footer links,
making them smaller than links elsewhere on the page:
#footer a:link, #footer a:visited {
font-size: 0.8em;
}
And there we have it: three different link styles on the same page, without messing around
with classes.