1 Tricks using pseudo-classes and pseudo-elements

Certainly, you are already familiar with a number of pseudo-classes and pseudo-elements that you can use very nicely to “automate” graphic tasks. There are, for instance, the pseudo-elements ::before and ::after that you can use to attach text or graphics to existing HTML elements, or the :nth-child(n) pseudo-class that you can use to design elements individually in the document based on their position.

CSS3 offers you yet another few pseudo-formats that you can use to achieve interesting effects. These include, for instance, the pseudo-classes :checked and :target as well as the ::selection pseudo-element. I would like to present these three formats to you below.

1.1Defining your own selection colors

We will start with a simple example. One small, yet smart new option available in CSS3 is to define your own colors for highlighted text and adapt them to your own design concept. To do this, you simply insert the ::selection pseudo-element in your CSS definitions (adding the vendor prefix for Firefox), and assign a background color and (optionally) another text color, e.g.:

If there is no specific selector in front of it, the selection specified applies to the whole document. If you want to restrict the selection color to a particular element, insert, for instance, instead:

or