This is the final part in this 3 part series (see Part Iand Part II), and we’re on to Pseudo-element selectors.

The :first-line pseudo-element allows you to target the first line of a given target, which must be either a block level element, inline-block, table cell or caption. So, for example, if you wanted to make the first line of a paragraph red then you could use

[sourcecode language=”css”]p:first-line { color: red }[/sourcecode]

The properties available to use with this selector are similar to that of the inline elements, which you can associate with text formatting eg. font, text-transform, line-height etc.

This selector allows you to target the first letter of the given tag and is commonly used to create a large initial letter or a drop cap. The properties available are that of the text formatting properties, along with border, padding and margin.

To make a larger initial letter then you could just apply a font size and weight to it eg.

[sourcecode language=”css”]p:first-letter {
font-size: 2em;
font-weight: bold;
}[/sourcecode]

To create a drop cap we would need to float the letter as well eg.

[sourcecode language=”css”]p:first-letter {
font-size: 2em;
font-weight: bold;
float: left;
}[/sourcecode]

Finally, the :before and :after selectors allow you to add content to your site by targeting specific elements. They’re used in conjunction with the content property. For example, if you wanted to insert a word at the start of the paragraph with an id of dynamic you could use

[sourcecode language=”css”]p#dynamic:before { content: “Chapter 1: ” }[/sourcecode]

Which would then take a piece of content such as

[sourcecode language=”html”]

“Hello”, she said, “how are you today?”

[/sourcecode]

to become

[sourcecode language=”html”]

Chapter 1: “Hello”, she said, “how are you today?”

[/sourcecode]

The content property can accept a standard string, it can also accept the values of

In order to use open-quote and close-quote the value for the quote marks needs to be defined with the ‘quotes’ property, for example:

[sourcecode language=”css”]
q { quotes: ‘”‘ ‘”‘ “‘” “‘”; }
q:before { content: open-quote; }
q:after { content: close-quote; }
[/sourcecode]

The above CSS would set the opening and closing quote marks to be a double quotes with nested quotes set to use single opening and closing quote marks.

A working example of how to make use of the attribute value is to use the cite attribute for a blockquote tag. Then we can use the :after selector and content property to grab the value within this cite attribute and output it after the blockquote eg. (CSS code courtesey of David Anderson)

[sourcecode language=”css”]blockquote[cite]:after {
display : block;
margin : 0 0 5px;
padding : 0 0 2px 0;
font-weight : bold;
font-size : 90%;
content : “[source: “” ” attr(cite)”]”;
}[/sourcecode]

There is much more that the content property can do such as counters and improved list numbering, however these would require their own individual posts which I will come around to.

Hopefully this has opened your eyes to the amount of additional functionality and targeting that CSS can give. Some of these options are not very well supported in IE7, hopefully now with IE8 out, we can start to use more of the functionality that is available to us, and start to move away from the total lack of support in IE6 for anything more than the standard CSS selectors!