Psuedo Elements and Classes

Pseudo Classes

Classes that cause rules to be applied when a specific event happens. These classes are not attached to tags in markup. p50

Anchor Link Pseudo Classes

Commonly used with hyperlinks. p50

Link Visited Hover Active

Other Useful Pseudo-Classes

This rule selects the first-child element with the name x.

x:first-child

This rule selects the focus of the user with the name x.

x:focus

Pseudo-elements

Provides the effect of extra markup without the markup in your code.

This rule selects the first letter of tag name x and applies your style.

x:first-letter

This rule selects the first line of tag name x and applies your style.

x:first-line

This rule adds specified text before an element of tag name x.

x:before

This rule adds specified text after an element of tag name x.

x:after

Example of x:before and x:after

h1.age:before {content:"Age:"}
h1.age:after {content:"years old."}

Code <h1 class="age">36</h1> displays "Age: 36 years old."

Back to Cascade Style Sheets