Syntax

selector:pseudo-class { property:  value }

CSS Pseudo Selectors can also be used with classes

Selector.class:pseudo-class { property: value }

Common Pseudo Selectors

We often use pseudo selectors on our websites and they are really important. I am talking about the link states.

a:link {color:#FF0000} /* unvisited link */
a:visited {color:#00FF00} /* visited link */
a:hover {color:#FF00FF} /* mouse over link */
a:active {color:#0000FF} /* selected link */

Take care of the right order, otherwise they will not work.
You can also combine the Pseudo-Classes with CSS Classes

a.red:visited {color:#FF0000}

The :first-child Pseudo-Class

A really useful but most people do not know that it exists, is the :first-child selector. It matches the first child of another element. To make sure, that it is also working in Internet Explorer, a doctype must be declared
In the example below, the selector matches the first “p” element and changes the text color to blue.

Blue colored paragraph

Normal styled paragraph

Now we are going to select every “i” element in the first “p” element of the document. It is really easy, we only have to write p:first-child i { }

I am italic. I am italic

I am italic. I am italic

In this example, the selector mathes the first “i” element in every “p” element.

I am bold. I am bold

I am bold. I am bold

That’s it. In the next article I’ll write about Pseudo elements in CSS, like :first-letter.