CSS 2.1 selectors, Part 3

This is the third and final part of a three-part article series that explains the selectors that are available in CSS 2.1. Part 1 is about the more basic stuff like type selectors, class and id selectors, the universal selector, simple selectors. In Part 2 I explained combinators, combined selectors, grouping, and attribute selectors.

This time I will take a closer look at pseudo-classes and pseudo-elements. Like the more advanced selectors I talked about in Part 2, pseudo-classes and pseudo-elements are not yet fully supported in all major browsers, so remember checking what happens when support is missing. You don’t want your content to be inaccessible in browsers that don’t support the CSS described here.

Pseudo-classes and pseudo-elements

Pseudo-classes and pseudo-elements can be used to format elements based on information that is not available in the document tree. For example, there is no element that refers to the first line of a paragraph or the first letter of an element’s text content.

Pseudo-classes

Pseudo-classes match elements based on characteristics other than their name, attributes or content.

:first-child

This pseudo-class matches an element that is the first child element of another element. Let’s say you want to give the first paragraph of an article a special styling. If the article is contained in a div element with a class name of “article”, the following rule would match the first p element in each article:

div.article p:first-child {
	font-style:italic;
	}

To match all p elements that are the first child of any element, you can use the selector in this rule:

p:first-child {
	font-style:italic;
	}

:link and :visited

The link pseudo-classes affect the unvisited and visited states of links. The two states are mutually exclusive – a link cannot be both visited and unvisited at the same time.

These pseudo-classes only apply to hyperlink source anchors as determined by the document language. For HTML, this means a elements with an href attribute. Since it doesn’t affect any other elements, the following selectors are the same:

a:link
:link

:hover, :active, and :focus

The dynamic pseudo-classes can be used to control the presentation of certain elements depending on certain actions performed by the user.

:hover applies while the user is using a pointing device to point to an element but does not activate it. Most commonly this means using a mouse to make the cursor hover over an element.

:active applies while an element is being activated by the user. For mouse users this means if you press the mouse button and keep it pressed, until you release it.

:focus applies while an element has the focus, i.e. while it accepts keyboard events.

An element may match several pseudo-classes at the same time. An element could have focus and be hovered over, for instance:

input[type=text]:focus {
	color:#000;
	background:#ffe;
	}
input[type=text]:focus:hover {
	background:#fff;
	}

The first rule will match single line input elements that have focus, and the second rule will match the same elements when they are also hovered over.

:lang

The language pseudo-class can be used to style elements whose content is defined to be in a certain language (human language, not markup language). The following rule defines which quotation marks to use for an inline quotation that is in Swedish:

q:lang(sv) { quotes: "\201D" "\201D" "\2019" "\2019"; }

The human language of a document or element is normally specified with the lang attribute in HTML and the xml:lang attribute in XHTML.

Pseudo-elements

Pseudo-elements allow authors to access and format parts of the document that are not available as nodes in the document tree.

:first-line

The :first-line pseduo-element affects the first line of a paragraph of text. It can only be applied to block level elements, inline-block, table-caption or a table-cell.

The length of the first line obviously depends on a number of factors, including font size and the width of the element containing the text.

The following rule will apply to the first line of text in a paragraph:

p:first-line {
	font-weight:bold;
	color;#600;
	}

Note that there are some restrictions on which properties that apply to a :first-line pseudo-element. See CSS 2.1, 5.12.1 The :first-line pseudo-element for a list of the properties that apply.

:first-letter

This pseudo-element lets you target the first letter or digit of an element, and applies to block, list-item, table-cell, table-caption and inline-block elements.

The following rule would apply to the first character in an element with the class name “preamble”:

.preamble:first-letter {
	font-size:1.5em;
	font-weight:bold;
	}

As for the :first-line pseudo-element, the :first-letter pseudo-element has some restrictions on which properties that can be applied. See CSS 2.1, 5.12.2 The :first-letter pseudo-element for a list of the properties that apply.

:before and :after

Among the more debated CSS features, the :before and :after pseudo-elements can be used to insert generated content before or after an element’s content.

Here is an example of how :before can be used (from my article Custom borders with advanced CSS):

.cbb:before {
	content:"";
	display:block;
	height:17px;
	width:18px;
	background:url(top.png) no-repeat 0 0;
	margin:0 0 0 -18px;
	}

An example of using :after to insert the URL of a link after the link text:

a:link:after {
	content: " (" attr(href) ") ";
	}

Internet Explorer problems

Before you start putting everything you’ve learned about selectors to use, keep in mind that Internet Explorer up to and including version 6 has incomplete support for CSS 2.1 selectors. The following are unsupported or problematic:

Fortunately, it looks like Internet Explorer 7 will have complete support for CSS 2.1 selectors.

You’ve got the power—now use it right

And that’s all. Now that you’ve learned all about selectors in CSS 2.1, you’ve got a whole lot of power to use when styling your documents. Use it with care, to keep your markup tidy, and to increase accessibility and usability. And remember to think about what happens in older browsers that don’t support the more advanced CSS selectors.

Posted on October 24, 2005 in CSS