Producing web pages
* HTML CSS DHTML XHTML A to Z of tags        Accessibility          Design

Pseudo classes and elements

Pseudo-classes and pseudo-elements let you control the look of things that you can't define with a style for a tag. There is, for example, no tag that refers to the first line of a paragraph. There are not separate tags for the different states of a link.

Pseudo-classes distinguish among different tag types, for example, visited links and active links represent two types of anchors. Pseudo-elements refer to parts of tags, such as the first letter or first line of a paragraph.

First off, you can customise how the browser displays links (unvisted, active and visited links). You can set any font or text formatting properties on these links. Just use the relevant a:link, a:visited or a:active pseudo class.

You can also use a:hover to change the appearance of a link when the mouse hovers over it.

You can use :cursor to choose which cursor you want to appear when the mouse moves over a tag.

Finally, you can apply a style to the:

  • First child of a tag with the first-child property. You can use it to make the first paragraph of a document to look different from the remaining paragraphs
  • First line of a block of text with the first-line property. You can use it print the first line in capitals and in bold
  • First letter of a paragraph with the first-letter property. You can use it to create drop capitals