DAN STORM

• previous
• next

CSS3 Pseudo-elements

As we said earlier, the double colon has been introduced for pseudo-elements. This distinguishes them from pseudo-classes, which take one colon. We also stated that for the sake of backwards compatibility, one colon is allowed for CSS1 and CSS2.1 pseudo-elements, but CSS3 pseudo-elements require the double colon.

selection

The selection pseudo-element specifies how elements appear when they are selected. This introduces the second type of pseudo-element. Like CSS1 and CSS2.1 pseudo-elements, selection performs a style change on only one part of an element. But like some pseudo-classes it acts upon an element in a certain state.

XForms are going to be part of the XHTML 2.0 standard. These next pseudo-elements are proposed to work with that next generation of forms. However, please note that XHTML2.0 is deprecated in favor of HTML5.

value

The value pseudo-element styles the representation of the data value. Thus in the following example the value of the text field will have a border around it irrespective of how the field as a whole is styled.

choices

The choices pseudo-element styles a list of options associated with a form element irrespective of the styling of its label, such as a list of radio buttons. No example yet exists in the CSS3 working specification. Stay tuned.

repeat-item

The repeat-item pseudo-element represents a single item from a repeating sequence. It is generated as a parent to all the elements in a single repeating item. Each repeat item is associated with a particular instance data node, and is affected by the model item properties found there, as the related style properties will cascade to the child elements. This is used in conjunction with the repeat-index pseudo-element below.

repeat-index

The repeat-index pseudo-element represents the current item of a repeating sequence. It takes the place of the repeat item as a parent of all the elements in the index repeating item. The W3C supplies this hypothetical use of repeat-item and repeat-index using XForms.

CSS3 General Pseudo-classes

target

When a link refers to an item on the same page, that named reference is the target. The target pseudo-class styles the in-page target of a hyper reference.

When you click on the link, the target will don the style in the CSS.

root

The root pseudo-class represents an element that is the root of the document. Since in HTML this is the HTML element, this pseudo-class might not be terribly useful. But it might be useful in conjunction with XSLT to transform XML.

last-child

This should need little explanation. Many uses come to mind. You may wish to style the last paragraph inside an ID in a unique way, or perhaps add a visual cue to the last item in a sequence.

only-child

This is used when you wish to style elements differently when they are orphaned.

nth-child(n)

The nth-child pseudo-class is a bit complex but very useful in accessing the document tree. Using it one can access a particular element. Let's suppose that we have rows of images, and you want the third item in each row to have a red border. At a glance you can see that this is more powerful than first-child or last-child.

A more practical use is to create zebra tables, that is, tables in which the row colors alternate. Here is the syntax, followed by an example.

In the example above we are declaring how some table rows are going to appear. We have set odd rows to be gray. Let's look closely at what's in the parentheses. 'a' stands for the cycle of row alternations, in this case two. The 'n' is a literal, not a variable. 'b' equals the count of each grouping that is selected, in this case 1. What this means is that there will be two alternating rows in our table. The first (and every odd) row will have a gray background. The second (and every even) row will have a white background. If, for example we wanted three rows, we might do this.

Now that you know how to code odd and even rows, you can also use this shorthand.

nth:child can be used to select a single row number without iteration. This is done by setting the 'a' value to 0, or leaving it out, with or without the 'n'. The following examples show how to style the eleventh row of a table.

Each of the following examples selects all rows.

The values for 'a' and 'b' should not equal zero, otherwise they will represent no element in the document tree. However, the value 'a' can be negative. This can be used to style a non-iterating block. In the following example the first six rows of a table would be styled.

The tables at this site are all styled using nth-child. If you have a newer browser you will see two different colors.

nth-last-child(n)

This pseudo-class is identical to the previous one except that the counting begins from the last element.

This would make odd number rows counting from the last row.

This previous example would select the last two rows.

:nth-of-type(n)

While the nth-child() pseudo-class represents an element that has siblings before it in the document tree, and the nth-last-child() pseudo-class represents an element that has siblings after it in the document tree, the nth-of-type pseudo-class notation represents an element that has siblings with the same element name before it in the document tree. This is useful if elements intervene. One application might be to alternate the alignment of images.

nth-last-of-type(n)

Not surprisingly, the nth-last-of-type pseudo-class counts from the last item. This rule would control the alignment of only the last two images.

first-of-type and last-of-type

These are very convenient pseudo-classes. Let's suppose that you have several paragraphs on a page and want the first one styled uniquely.

This differs from first-child in that we are not designating a descendant relationship. In contrast to first-child this would be used in a more pervasive way. Predictably, last-of-type acts in the other direction. In the following example we set the last P element bold irrespective of its descendants in the document tree.

only-of-type

This represents an element that is unique in the HTML document. It has a lower specificity than first-of-type, last-of-type, nth-of-type(), or nth-last-of-type().

empty

The empty pseudo-class represents an element that has no children at all, including text nodes. The affected element would need to be entirely empty, like <p></p>. This is useful if, for example, you wish to call attention to a cell that is empty, or to indicate where an image is unavailable. It could also be used diagnostically to help you find empty elements and remove them.

contains()

The contains pseudo-class searches the content of a specified element for a matching substring. This selector is for static media only (i.e., print and not screen display). The following example styles a list item that contains the word "markup".

Note that this is a pseudo-class in that it styles the entire list item, not the word "markup".

not()

This is the very useful negation pseudo-class. This next example would match all elements except images.

This would match all text fields that are not disabled.

CSS3 Pseudo-classes for Form Elements

enabled and disabled

An element is enabled if the user can either activate it or transfer the focus to it. If you wish to style editable fields a certain way, this is a useful pseudo-class.

An element is disabled if it can potentially be enabled, but the user cannot presently activate it or transfer focus to it.

checked

Like the two previous pseudo-classes, this pseudo-class works with form elements, particularly the radio and checkbox buttons.

It can also be used with options in a select list, though those items cannot technically be checked.

indeterminate

This pseudo-class is used to style the state of a checkbox or radio button that is neither selected nor explicitly deselected, and could reasonably be used when a set of radio buttons has no default, and none has yet been selected.

default()

The default pseudo-class applies to one or more default elements, for example, context menu items, buttons, and drop lists. Specific examples would be for styling the default submit button among several others, or the default option from a drop list.

valid and invalid

The valid and invalid pseudo-classes apply to items that are valid or invalid with regard to data validity in XForms.

In-range and out-of-range

The in-range and out-of-range pseudo-classes apply to forms, but have a wider application. They apply only to items that have a specified data range, otherwise the pseudo-class is ineffective. If, for example, a data range is specified as 1-5, one can use the in-range pseudo-class to style any data items within that range. The out-of-range pseudo-class will style out of range data items that are part of a specified data range. Otherwise the pseudo-class is ineffective.

required and optional

These pseudo-classes not surprisingly are used to style a required item, such as a required form field, or an optional one. These are used for form elements only, since other types of elements cannot be required or optional.

read-only and read-write

These pseudo-classes allow styles to be based on whether form fields can be edited or not, and might be useful on a user information page where only some fields are editable. A form field that cannot be edited could be styled with, for example, a gray background, or without borders.

• previous
• next