Pseudo-classes and elements as selectors

Pseudo-classes and pseudo-elements are special classes and tags. Pseudo-classes distinguish among different tag types, for example, visited links and active links. Pseudo-elements refer to parts of tags, such as the first letter of a paragraph.

Here are some examples:

a:active     {color: blue; font-size: 125%;}
p:first-line {text-transform: uppercase;}

Each rule is made up of:

• A selector usually an HTML tag such as <a> or <p>. In our examples, the selectors are the <a> and the <p> tag
• The pseudo-class or pseudo-element that you want to apply to the tag. In our examples, the pseudo-class is :active and the pseudo-element is :first-line
• A property and a value for the property such as blue for the colour or Arial as the font size

The syntax is similar to a normal style rule except the selector is followed by a colon and the pseudo-class or element. The rest of the rule that specifies a property within curly brackets { } is the same as a normal style rule. Each property is identified by the property name, followed by a colon and the property value.

You can also apply pseudo classes and elements to selectors with a specific class:

p.first:first-letter {font-size: 200%; font-style: italic;}

There are several pseudo-classes and pseudo-elements to choose from, look at Pseudo classes and elements for a list and some examples of how to use them.