8.6 Pseudo Elements with CSS Classes

Pseudo-elements can also be combined with regular CSS classes. The basic format for this is:

selector.class:pseudo-element {property:value;}

For example we could add the following to our stylsheet:

p.article:first-letter {color:#ff0000;}

An in the HTML document:

<p class="article">Some lovely content...</p>

The example above will display the first letter of all paragraphs with the class .article in red.

Multiple Pseudo-elements

Several pseudo-elements can also be combined. In the following example, the first letter of any paragraph will be red and in a 16px font size. The rest of the first line will be blue and in small-caps. The rest of the paragraph will be the default font size and color:

p:first-letter		{
			color:#ff0000;
			font-size:16px;
			}

p:first-line		{
			color:#0000ff;
			font-variant:small-caps;
			}