Bernskiold Media

When coding styles for elements in CSS, you can target different states of the same elements by using so called pseudo-selectors.

Pseudo-Selectors for links

There are mainly three pseudo-selectors for use with A elements, :active, :visited, :link and :hover. These all target the different focuses as their names imply.

Example:

a:active	{ color: red; }			/* active links	*/
a:visited	{ color: yellow; }		/* visited links	 */
a:link		{ color: green; }		/* unvisited links */
a:hover		{ color: purple; }		/* when the user hovers	*/

Note that a:link isn’t necessarily the same as just using a. Even though the A tag’s primary use is as a link anchor (using the href=”"), you can use it to define page anchors, in which case you may not want these styled in the same way.

Pseudo-Selectors for forms

A few selectors can also be applied to forms and form elements, for example input tags, namely :hover and :focus. The former will apply when the user hovers over the element, while the latter will apply as the user clicks to begin to type.

Example:

input:hover		{ background: green; }
input:focus		{ background: yellow; }

General use of pseudo-selectors

You can use for example :hover on many other block elements such as li, giving you a change of style as the user hovers over the list element.