Link Element

From CSS Discuss

Jump to: navigation, search

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...)


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.

Menus Galleries

  • Alsacreations's CSS Menus Gallery All sort of menus for inspiration (simples, graphics, expanding,...).
Personal tools