Brought To You By
Tomlin Ventures Ltd

Using Pseudo Selectors

Using Pseudo Classes and Elements to style with CSS

Pseudo selectors on the whole are a relatively new addition to CSS. They are slightly different to the other CSS selectors in the way they work and the way they are defined.

Technically Pseudo Selectors are not selectors themselves but rather they add additional effects to selectors.

As such, pseudo selectors fall into one of two categories.

Before we look at each of these fields in more depth lets look at why pseudo classes and elements are so different from the selectors that you have seen previously.

Why Pseudo Selectors Are Different

Up to now you have used selectors to style your HTML pages by referencing page elements. As such an element is either styled or it is not, if you wished to style part of an element say the first letter of a paragraph you would need to surround the letter with a span element and then style the span element accordingly.

Pseudo classes and elements can give you the ability to style parts of an element independent of the element as a whole. They can also give a designer greater capability to select specific page elements without the need for inline HTML code, more on that later.

The Pseudo Syntax

Both classes and elements have the same syntax which will look something like this.

a:hover		{color: red;}
a.class:hover	{color: red;}

The first line will add the hover class to all anchor elements as defined by the a at the start.

In the second example we have simple added a class definition. Therefore we have added the hover effect to all anchor elements with the class of class. The actual pseudo selector part of the code is.


However, pseudo selectors by definition must be applied to some other kind of selector to function properly.

Pseudo Classes

Classes add effects to the elements that they refer to under certain defined circumstance. For example, changing the colour of a link when the user hovers the mouse pointer over the link or changing the appearance of the first paragraph only in a body of text.

List of pseudo classes

Pseudo elements

Pseudo elements add effects to parts of an element. For example, they could change the styling for the first letter or the first line of a paragraph whilst leaving the rest of the element unchanged.

List of pseudo elements

We will look at each of these in more detail in upcoming articles and the list will be updated as new selectors are added.

As always there is a vast difference between browsers over the support for these classes. Generally the pseudo classes relating to links are okay, beyond these it is not guaranteed so use them wisely.

Share to Facebook Share to Twitter Digg This Stumble It Share to Reddit Share to Delicious Technorati LinkedIn Google Buzz Blogger More...

blog comments powered by Disqus