XHTML: Pseudo-Elements & Classes

The various pseudo-elements and classes that can be implemented into your CSS. This tutorial covers the following:
  • Pseudo-classes - :focus, :link, :active, :hover, :visited
  • Pseudo-elements - :before, :after, :first-child, :first-letter, :first-line

Pseudo-Classes

:focus

:focus is a pseudo-class that can be applied to hyperlinks and various elements. It will take effect when the selected element is in focus.
  • Examples
  • a:focus { background: #000; }
  • input:focus { background: #fff; }
The input box below will have a yellow background with pink letters when put in focus.

:link

:link is a pseudo-class that can be applied to hyperlinks. It takes effect when a link is unvisited.
  • Example
  • a:link { color: #fff; }

This is a link with the :active property applied. The background color and the text color will change if you haven't visited it.

:active

:active is a pseudo-class that can be applied to hyperlinks. It takes effect when a link is active.
  • Example
  • a:active { color: #000; }

This is a link with the :active property applied. The background color and the text color will change when you click it.

:hover

:hover is a pseudo-class that can be applied to hyperlinks and various elements. It will take effect when the selected element is hovered.
  • Examples
  • a:hover { background: #000; }
  • p.background:hover { background: #fff; }

When you hover with your cursor over this text, the background and the text will turn into another color.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur tempor. Pellentesque fermentum, odio pretium dapibus malesuada, ipsum risus volutpat pede, id elementum lectus metus eget eros. Fusce sagittis. Ut non est.

:visited

:visited is a pseudo-class that can be applied to hyperlinks. It takes effect when an element has been visited.
  • Example
  • a:visited { background: #000; }

This is a link with the :active property applied. The background color and the text color will change if you visit it.

Pseudo-Elements

:before

:before is a pseudo-element that can be applied to various elements. It generates content that will appear at the beginning of the element.
  • Examples
  • p:before { content: " Text here. "; }
  • h1:before { content: url(image.jpg) " "; }

An image will be generated at the beginning of this sentence.

:after

:after is a pseudo-element that can be applied to various elements. It generates content that will appear at the end of the element.
  • Examples
  • p:after { content: " Text here. "; }
  • h3:after { content: url(image.jpg) " "; }

An image will be generated at the end of this sentence.

:first-child

:first-child is a pseudo-class that can be applied to various elements. It's only matched when applied to the first child of another element. To select whatever element that is the first child of a paragraph, the following example can be used: p > em:first-child
  • Examples
  • p:first-child { color: #000; }
  • p > em:first-child { color: #f65151; }

This is not the first child. But this is. It's a specific selection using the code p > em:first-child { background:#f8ffa9; color: #f65151; }. This means the <em> tag inside of the <p> tag was affected. A second <em> is not affected as it only applies to the first child.

:first-letter

:first-letter is a pseudo-element that can be applied to various elements. It applies to the very first letter of an element.
  • Examples
  • h1:first-letter { color: #000; }
  • p:first-letter { text-transform: lowercase; }

The first letter of this paragraph is 20px.

:first-line

:first-line is a pseudo-element that can be applied to block-level elements. It styles the very first line of text in a document.
  • Example
  • p.first-line { color: #000; }

The very first line of this text will have a different background and image color. Sed elementum massa ut diam. Aliquam nonummy, mi et interdum rutrum, tortor neque dignissim turpis, in ultricies libero sem ac quam. Praesent congue eros in ligula. Sed id pede a lacus convallis adipiscing. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

eXTReMe Tracker