CSS pseudo elements

Not all of these selectors are implemented in all browsers.

Dynamic pseudo classes

Hover

This selector allows the style of an element to change when the user moves their mouse over an element. This example changes the background colour of a div element that has the class attribute set to ‘green’.

div.green:hover
{
   background-color:#33CCCC;
}

Active

The active selector allows you to change the style of an element that the user has selected (e.g. pressed – but not released – the mouse).

div.green:active
{
   background-color:#CC9966;
}

Focus

This selector applies to elements that can have focus, for example when entering text into a text box that element has focus. The following example adds an outline to all elements within a form that have focus.

form > :focus
{
   outline:solid medium #FF6633;
}

Combining selectors

These selectors can be combined to create more effects, such as a different hover style if the element is in focus to that when it is not.

form > :focus:hover
{
   outline:solid medium #0033CC;
}

First line styles

CSS can be used to change the style of the first line of text in an element using selectors.

div:first-line
{
   font-variant: small-caps;
}

First letter styles

This selector changes the appearance of the first letter of text of the specified element.

div:first-letter
{
   font-size: 2em;
}

Before and after pseudo elements

These selectors can be used to add content before and after specified elements.

div.notice:before
{
   content: "NOTICE:"
}
div.notice:after
{
   content: "END NOTICE"
}

First child and language pseudo selectors

These are covered in the CSS selectors tutorial.