CSS Syntax (Part 3)

Pseudo-classes and Pseudo-elements

Pseudo-classes and pseudo-elements are special "classes" and "elements" that are automatically recognized by CSS-supporting browsers. Pseudo-classes distinguish among different element types (e.g., visited links and active links represent two types of anchors). Pseudo-elements refer to sub-parts of elements, such as the first letter of a paragraph.

Rules with pseudo-classes or pseudo-elements take the form

	selector:pseudo-class { property: value }

or

	selector:pseudo-element { property: value }
	

Pseudo-classes and pseudo-elements should not be specified with HTML's CLASS attribute. Normal classes may be used with pseudo-classes and pseudo-elements as follows:

	selector.class:pseudo-class { property: value }

or

	selector.class:pseudo-element { property: value }	

Anchor Pseudo-classes
Pseudo-classes can be assigned to the A element to display links, visited links and active links differently. The anchor element can give the pseudo-classes link, visited or active. A visited link could be defined to render in a different color and even a different font size and style.

An interesting effect could be to have a currently selected (or "active") link display in a slightly larger font size with a different color. Then, when the page is re-selected the visited link could display in a smaller font size with a different color. The sample style sheet might look like this:

	A:link    { color: red }	
	A:active  { color: blue; font-size: 125% }
	A:visited { color: green; font-size: 85% }

CSS Syntax (Part 1) | CSS Syntax (Part 2) | CSS Syntax (Part 3) | CSS Syntax (Part 4)