Link Element
From CSS Discuss
The A Html Element -- this page should be called "A Element" but nobody would know what the title meant when we link to it.
The link element has some special Pseudo Class ""es:
- :link (non-visited links)
- :visited (visited links)
And also the dynamic pseudo-classes (which most browsers support on all elements)
- :hover (being mouseovered)
- :focus (the current active element - especially useful for uses of non-pointing devices, e.g. keyboard tabbing)
- :active (being clicked upon or otherwise triggered)
The order is important for consistent behaviour: Remember "LoVe HAte" (or some other variant...)
Contents |
Link tricks
Differentiate destinations
CSS 2 and 3 provide Attribute Selector ""s (not supported by IE). CSS 3 includes substring matching of attribute values, for example:
a[href^="http:"] { /* external style */ }
a, a[href^="http://This Site's Domain/"] { /* internal style */ }
This can be used for:
- Mini Icons - Place an icon next to link that symbolizes if it is offsite link, mailto, etc.
Differentiate History
The usual browser default for links are blue for unvisted, purple for visted links. However, you can overcome these defaults using CSS in several ways:
Background Images
Using icons or other graphics to show link history.
- Colly Logic's Ticked off unvisited = blank checkbox, hover = arrow, visited = checked box, several CSS coding meathods listed
Text Formatting
Using formatting like underlines and color to show link history.
- Dive into Mark's Using Color Safely thinks out usability concerns.
Menus Galleries
- Alsacreations's CSS Menus Gallery All sort of menus for inspiration (simples, graphics, expanding,...).
