CSS online training course

CSS lesson 5, Pseudo classes and SPAN

PSEUDO Classes

Pseudo classes are being used to give a certain effect to a selector. The most known pseudo class is the :hover which makes the appearance of a element change when you touch it with your curser also called a rollover effect.

A pseudo class selector is comparrable with a form in HTML but its base is a colon followed by the name a the pseudo class.

The syntax: selector:pseudo-class {property: value}

  • 1.The combination #menu a ( ancor/link ) means that all a:items within menu will get a green color with a font size of 12px.
  • 2.The ancor a:hover is a mouseover which will make it change color.
  • 3.will give a red background with a yellow font color.

These are the most common pseudo selectors:

a:links (ancors) below with their values
a:link {color:#FF0000;} ( not yet visited link )
a:visited {color:#00FF00;} ( allready visited link )
a:hover {color:#FF00FF;} ( mouse over link )
a:active {color:#0000FF;} ( selected link )

Beware The right order of defining is very important when using a: when you are using the wrong order it won't work. a:hover allways has to come after a:link and also after a:visited.
But a:active has to come after a:hover
Pseudo class names are not case sensitive.

Less used pseudo classes are :focus which gives the color of a input field which the focus gets.
For a example look below :


Next there are the pseudo classes:
:lang to adjust a element on language basics.
:first-child to adjust a element with the parrent element.

Recently new elements are added :
:before adds content directly infront of a element.
:after adds content directly after a element.

A simple example is:
P:before { content: open-quote; }
P:after { content: close-quote; }


Now we will show you how span works but we dont recommend you to use it alot. You can best compare spans with divisions but they are a inline element oposite a block level element.
You can also give a span to just one letter

Below we will give a example of a span element. The text "before the span" gets the color and the size of the general <p> element while the text between <span class> will get the style of the CSS code.
The result :