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

Basics Creating a Document Head and Body Elements Formatting Text Creating Lists Embedding Images URLs Explained Linking to Documents Creating Tables Forms Form Basics Input and Textarea Select Lists Frames Framesets The Frame Element Nested Framesets Targetting Frames Inline Frames		Tips and Tricks Meta Tags Transition Effects HTML Generators Create a Document Create a List Create a Table

Basics Implementing CSS CSS Syntax Pseudo Classes/Elements CSS Classes CSS Properties Font Properties Color and Background Text Properties Border Properties Margins and Padding Size and Position		Tips and Tricks Menu Buttons Special Effects

Basics Running a Script Variables Expressions and Operators Objects.Properties.Methods The Date Object Strings Regular Expressions Defining RegExp Patterns Branches and Conditions Loops Arrays Array Basics Array Methods Sorting Arrays User-Defined Functions Cookies Windows Frames		Tips and Tricks Image Replacement Using Includes Form Validation Debugging

Basics Creating a Script Running a Script Variables Expressions and Operators Strings Strings Basics Strings and Substrings Replacing Substrings Regular Expressions Branches and Conditions Loops Arrays Array Basics Array Functions Sorting Arrays User-Defined Functions Include and Require Uploading Files File Functions Session Variables		Tips and Tricks Page Templates Form Reply Scripts Form Validation JavaScript to PHP