Mastering the Power of CSS Selectors - CSS3 Foundations - page 42

• Contains multiple attribute values
• Has an attribute value list of hyphen-separated words
• Has an attribute value starting with, ending with, or containing a certain string of text
If the sound of those takes your fancy, I'd recommend reading more about them at referen-
ce.sitepoint.com/css/attributeselector .
Pseudo-Classes
Sometimes, a part of a web page isn't made up of a physical element, meaning it can't be selected through the use of
a normal selector; this is where pseudo-classes come in use. Note that, unfortunately, pseudo-classes are not suppor-
ted in all browsers and each of the following descriptions will state which browsers a pseudo-class is not be suppor-
ted in. In CSS3 Foundations , you don't rely on too many pseudo-classes, and any issues that may occur in browsers
that don't support these pseudo-classes are addressed in Chapter 16.
Dynamic Pseudo-Classes
Dynamic pseudo-classes allow you to style an element when it is interacted with—when a user hovers over it, for ex-
ample.
At present, when a user hovers over links on the Cool Shoes & Socks page, the links don't change. You can use
pseudo-classes to make it so:
1. In styles.css, add the following below the body rule set:
a:link {
text-decoration: underline;
}
a:hover {
text-decoration: none;
}
2. Save styles.css.
A pseudo-class consists of a colon ( : ) followed by the name of the pseudo-class. Here, you add two pseudo-class
rule sets: one for an unvisited link and another for when a user is hovering over a link. An unvisited link is under-
lined, and when hovered over, that underline is removed. When the cursor moves away from the link (and is no
longer being hovered over), the underline is applied again.
You can use other dynamic pseudo-classes along with :hover :
1. In styles.css, add the following:
a:visited {
color: black;
}
a:active {
color: red;
}
a:focus {
outline-color: black;
outline-style: dotted;
outline-width: 1px;