Publishers of technology books, eBooks, and videos for creative people

Home > Articles

  • Print
  • + Share This
This chapter is from the book

This chapter is from the book

Dynamic Selectors

HTML elements can be in different states depending on the user's current action (the mouse may be hovering over an element), or past actions (a link may have been visited by the user at some point). CSS provides ways of selecting elements based on these various states. The format for these selectors is to append a colon (:) and the name of the state to an existing selector. For example, to select an element with a class value of navigation when the mouse is over it, we'd use the selector .navigation:hover. The various states and associated selectors in CSS are:

  • hoverWhen the user has the mouse over the element. The associated selector is :hover. Any element can be in the hover state, although in IE 6 and earlier only anchor elements in the hover state could be styled with this selector.
  • activeThis is the state an element is in when it is being activated—for example by being clicked, tapped, or when the return key is pressed while the element has the focus. The associated selector is :active.
  • visitedBrowsers typically remember for some period of time that a link has been visited, which can help users differentiate between different links on a page. You can style visited links with this selector. Think carefully before removing visual cues that differently styled visited and non-visited links provide the user. The associated selector is :visited.
  • focusWhen an element has the keyboard focus—that is, when keystrokes will go to this element—it is in the focus state. A common style for text fields with the focus is some kind of outline. The selector for an element with the focus is :focus.

One common "gotcha" with these states is the difficulty getting them in the right order in your style sheet. Elements can be in more than one state—for example, a link in the hover state might also be visited, or an element with the focus might also have the mouse over it. We know that the further down a style sheet a statement is, the more weight it has compared with other selectors of the same specificity. Now if we were to specify four statements like this:

a:visited {color: red}

a:hover {color: green}

a:active {color: blue}

a:link {color: black}

a:focus {color: orange}

What color would a link be in the hover state? The visited state? The active state? When it has focus? The answer is that in all but the last case, it would be black—because the a:link selector "trumps" all the others by virtue of it being lower in the style sheet than them—and a link is always a link, regardless of what other state it is in.

The best order for dynamic statements is link, visited, hover, focus, active. This means that the most significant state to the user at any given time gets precedence when it comes to styling.

Adding :link, :hover, and so on to a selector increases its specificity over that same selector without the added "pseudo class" (the technical term for these selectors). So, in the following instance:

 a:link {
  color: red
}

a{
  color: green
}

the link in its unvisited state will be red, even though this statement precedes the statement with the selector a.

  • + Share This
  • 🔖 Save To Your Account