- A Short History of Style for the Web
- What Is CSS?
- How Is CSS Used?
- Basic CSS Syntax
- The Basics of Selectors
- Basic Properties: Font Styles
- Inheritance
- Getting Specific: class and id Selectors
- Common Text Layout Properties
- Combinators: Descendant and Child Selectors
- Common Background Properties
- Dynamic Selectors
- Basic Page Layout
- Advanced Page Layout
- Positioning
- Advanced Selectors
- Display Types
- More Properties
- Media Types
- Importing Style Sheets
- Quality Assurance
- Specific Challenges and Techniques
This chapter is from the book
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:
- hover—When 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.
- active—This 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.
- visited—Browsers 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.
- focus—When 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.