Attribute Selector

From CSS Discuss

Jump to: navigation, search

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.

Contents

HTML refresher

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:

  • That a particular attribute be set
  • That a particular attribute be set to a specific value
  • That a particular attribute include a specific value among its space separated list of values
  • 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 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:

Attribute only

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

Attribute and value

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" 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"] Lastly, where an attribute must include a value among its list of hyphen separated values, the form is body[lang|="en"]

Examples

See Also


Category Selector

Personal tools