Pseudo Classes

A pseudo-class is used to define a special state of an element. It can for example be used to style an element when a user hovers over it or to style visited and unvisited links differently.

The syntax of pseudo-classes:

selector:pseudo-class {property:value;}

Anchor Pseudo-classes

a:link {color: red;} Color tutorial

a:visited {color: green;} Color tutorial

a:hover {color: yellow;} Color tutorial

a:active {color: orange;} Color tutorial

The hover pseudo class can also be used for any other elements.

img:hover {opacity: .5;}

Pseudo Classes and CSS Classes

Pseudo classes can be combined with CSS classes:

a.highlight:hover {color: #ff03ee;}

Pseudo Elements

A CSS pseudo-element is used to style specified parts of an element. It can for example be used to style the first letter, or line, of an element,insert content before, or after, the content of an element.

The syntax of pseudo-elements:

selector::pseudo-element {property:value;}

First-line:

p::first-line {color: #ff0000; font-decoration: underline;}

Qui ipsorum lingua Celtae, nostra Galli appellantur. Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Nihilne te nocturnum praesidium Palati, nihil urbis vigiliae. Cum sociis natoque penatibus et magnis dis parturient.

First-letter:

p::first-letter {color: #ff0000; font-decoration: underline;}

Hi omnes lingua, institutis, legibus inter se differunt. Curabitur blandit tempus ardua ridiculus sed magna. Excepteur sint obcaecat cupiditat non proident culpa. Quam diu etiam furor iste tuus nos eludet?

The ::before pseudo element can be used to insert some content before the content of an element.

p::before {content: url(http://images.marapets.com/top/top_gallery.png);}

Hi omnes lingua, institutis, legibus inter se differunt. Etiam habebis sem dicantur magna mollis euismod.

The ::after pseudo element can be used to insert some content after the content of an element.

p::after{content: url(http://images.marapets.com/top/top_gallery.png);}

Tityre, tu patulae recubans sub tegmine fagi dolor. Quisque ut dolor gravida, placerat libero vel, euismod.

Pseudo Elements and CSS Classes

Pseudo elements can be combined with CSS classes:

p.intro::first-letter {color: #ff33ee;}