Home > CSS > CSS Pseudo Classes/Elementsprinter version

CSS Pseudo Classes/Elements

CSS pseudo classes and pseudo elements allow you to add extras to some HTML elements.

Pseudo-classes

Pseudo-classes allow you to add additional control to some elements, normally links and the syntax is ...

tag: pseudo-class {
property: value
}

The pseudo classes that apply to links (i.e. the anchor <a> element) are ...

link - an unvisited link.
visited - a visited link.
hover - when the mouse is over the link.
active - when the link has been selected.

Example of pseudo-classes Applied to Links

a: link {
color: #0000ff
}
a: visited {
color: #ff00ff
}
a: hover {
color: #ff0000
}
a: active {
color: #00ff00
}

The rules above result in ...

Blue unvisited links
Purple visited links
Red links on mouse over
Green links when active

Note: For hover to work properly it must come after link and visited. For active to work properly it must come after hover.

Pseudo-elements

Pseudo-elements give control over commonly used text elements and two of the most common are ...

first-line which affects the first line of text before the line breaks
first-letter which affects the first letter of the text.

The syntax for pseudo-elements is ...

tag: pseudo-element {
property: value
}

Example of first-line pseudo-element

p: first-line {
color: #0000ff
}

The rule above causes the first line of text within the paragraph to be blue.

Example of first-letter pseudo-element

p: first-line {
color: #ff0000
}

The rule above causes the first letter of text within the paragraph to be red.

Previous - CSS Syntax Next - CSS Classes