introduction ~ selectors ~ properties ~ advanced ~ real world CSS HTML element | class | ID | contextual | link pseudo class | pseudo element | selector groups | dynamic pseudo class | language pseudo class | child | first child | adjacent | attribute | row & column

attribute selectors

Explanation

Attribute selectors extend significantly the class and id selectors introduced in CSS1. While the syntax is very different, class and id selectors are one simple aspect of what can be achieved with an attribute selector.

Firstly, what is an attribute? If you aren't familiar with the term, attributes are the properties of HTML elements. Some simple examples you might have seen are href, title, width and class. With attribute selectors, you can select elements on the basis of their attributes and the values of these attributes.

For example, you can select any link with a particular href, or any image with some specific alt text. You can also use it to select all tables that have a width attribute, no matter what the value of that attribute is.

Syntax

Attribute selectors have two parts. The first part is a selector that identifies an element generally (it might be an HTML element selector, or a more specific kind of selector such as a contextual selector). The second part specifies a condition for the attributes of the element. There are four kinds of condition:

1. That a particular attribute be set
2. That a particular attribute be set to a specific value
3. That a particular attribute include a specific value among its space separated list of values
4. That a particular attribute include a specific value among its hyphen separated list of values

An attribute selector selects an element where both

• the general selector selects the element
• and the specified attribute condition

The first part of an attribute selector should be very familiar, it is simply one of the various selectors we are familiar with (for example an HTML element selector).

The part of the selector that specifies the conditions for attributes is contained within square brackets "[" and "]". The syntax for each of the conditions described above is

1. Where an attribute must simply be set, simply put the name of that attribute between the square brackets. For example, a[title] selects any a elements where there is a title set. That is, elements of the form <a title="value">. The value of the title is not important, only that it is set.
2. When an attribute must be set to a specific value, the form changes slightly. For example a[title="President"] will select only links with the title exactly equal to "President".
3. When an attribute must include a value among its list of space separated values, the form is again slightly different. This time, for example, we have the form a[title~="value"].
4. Lastly, where an attribute must include a value among its list of hyphen separated values, the form is body[lang|="en"]

Use

Attribute selectors provide a much more sophisticated version of the class and ID selectors. They will be of particular importance with XML.

Browser support

Detailed browser support information for this feature can be found in the full version of the Westciv CSS Guide, or in our CSS Browser Support Table.

next: row & column selectors

(C)1997-2001 Western Civilisation Pty. Ltd.