Blogging Tips

Explaining CSS Selectors Part III

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

:first-line

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

p:first-line { color: red }

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.

:first-letter

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.

p:first-letter {
    font-size: 2em;
    font-weight: bold;
}

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

p:first-letter {
    font-size: 2em;
    font-weight: bold;
    float: left;
}

:before and :after

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

p#dynamic:before { content: "Chapter 1: " }

Which would then take a piece of content such as

<p>"Hello", she said, "how are you today?"</p>

to become

<p>Chapter 1: "Hello", she said, "how are you today?"</p>

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

open-quote: Adds an opening quote eg. for at the start of paragraphs within a blockquote.
close-quote: Adds a closing quote eg. for at the end of the final paragraph of a blockquote.
no-open-quote: Doesn’t add a quote mark at the start but does increment the quote level when a quote hierarchy has been defined (see below)
no-close-quote: Doesn’t add a quote mark at the end but does decrement the quote level when a quote hierarchy has been defined (see below)
An attribute value: This will get the value of a specific attribute

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:

q { quotes: '"' '"' "'" "'"; }
q:before { content: open-quote; }
q:after  { content: close-quote; }

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)

blockquote[cite]:after {
	display : block;
	margin : 0 0 5px;
	padding : 0 0 2px 0;
	font-weight : bold;
	font-size : 90%;
	content : "[source: "" " attr(cite)"]";
}

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!