A ‘not-so-useless’ application of link pseudo-classes
(or: Who Says Links Have to be Short?)

by Frances Cherman

Based on a concept by Marshall Brekka

This is one of many possible applications of Marshall Brekka’s technique for combining an innovative link construction with the CSS ‘hover’ pseudo-class to change the content of a link along with its formatting, depending on its pseudo-state.

In this demo, in addition to the content and background color changing on hover as they do in Marshall’s example, the color changes again when the link is activated, and the user is taken to a page providing more information. There's no reason to think the ‘visited’ state couldn't also display unique content and styling. Thanks to Marshall Brekka for the concept (which he thought interesting but ‘useless’).

Please note: 1) This demo has not been tested on any version of IE (volunteers?). 2) Firefox requires using the ‘a’ selector without the :link pseudo-class for this (or any?) application and ignores any formatting assigned to the ‘a:link’ selector.

Try to answer each question without help. Check your answers by hovering over the question. Get more information on the topic by clicking the answer.

Q. What is the difference between a "block-level" element and an "inline" element?A. The primary difference is that block-level elements may contain inline elements and other block-level elements; inline elements may contain only data and other inline elements. Block-level and inline elements are also formatted differently. Q. What is the collective name of the three layers of membranes surrounding the brain and spinal cord?A. The meninges. The three layers are the dura mater, the pia mater, and the arachnoid (not to be confused with the Nina, the Pinta, and the Santa Maria...or with the alma mater, for that matter.) Q. Who put the "bomp" in the "bomp-she-bomp-she-bomp"?A. Do we look like a walking encyclopedia?? But console yourself with this amusing article on the subject.