Attribute Selectors
= Index DOT Css by Brian Wilson [bloo@blooberry.com] =

What Are They?

These Selectors specify a portion of the document tree based upon its context with relation to attribute values for elements.

Simple Attribute Selector

CSS2

Description:

This Selector matches all elements containing the specified attribute. The value of the attribute is unimportant in this case.

Syntax:

[Attribute] { [Declaration Block] } or
Element[Attribute] { [Declaration Block] }

Example:

blockquote[title] { color: red }
[matches all blockquote elements with a 'title' attribute. ]

Attribute Value Selector

CSS2

Description:

This Selector matches all elements containing the specified attribute which use the specified attribute value.

Syntax:

[Attr="value"] { [Declaration Block] } or
Elem[Attr="value"] { [Declaration Block] }

Example:

h2[align="left"] { cursor: hand }
[Matches all occurrences of the element named 'h2' using an 'align' attribute set to 'left'.]

One-Of-Many Attribute Value Selector

CSS2

Description:

This is a special form of the Attribute Value Selector, allowing a portion of an attribute value to be exactly matched where the portions of the attribute value are separated by spaces. This is especially useful in HTML with the common CLASS attribute where multiple classes can be assigned to a single element.

Syntax:

[Attribute~="value"] { [Declaration Block] } or
Element[Attribute~="value"] { [Declaration Block] }

Example:

h3[class~="class2"] { font-weight: bold }
[would match <h3 CLASS="class2"> and <h3 CLASS="class1 class2">]

Hyphen Attribute Value Selector

CSS2

Description:

This is another special form of the Attribute Value Selector, allowing a portion of an attribute value to be exactly matched, where the portions of the attribute value are separated by hyphens. The search for the attribute value fragment always starts from the beginning of the value. This Selector type is especially useful with RFC 1766 language values used in the HTML common LANG attribute and the xml:lang attribute.

Syntax:

[Attribute|="value"] { [Declaration Block] } or
Element[Attribute|="value"] { [Declaration Block] }

Example:

p[foo|="bar"] { background-color: yellow }
[would match <p FOO="bar-foo"> but not <p FOO="foo-bar">]

• Nothing to report.