complete css guide

Attribute selectors

Explanation

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

Firstly, let's just make sure we know what an attribute is. 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. If you're really not sure about this, you probably need to take a look at our course, HTML and XHTML for CSS. With attribute selectors, you can select elements on the basis of these attributes and their values.

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 - it might be a type selector, or a more specific kind of selector such as a descendant 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 selector matches the element
• and the specified attribute condition is met.

The first part of an attribute selector should be very familiar, it is simply one of the various selectors we are familiar with.

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 as follows.

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 attribute 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.

© 1997- western civilisation pty. ltd. Contact Us Search Site