Pro HTML5 and CSS3 Design Patterns

CHAPTER 3 CSS SELECTORS AND INHERITANCE

Attribute Selectors

Problem You want to select elements depending on whether they contain a specific attribute, contain a specific
word within a specific attribute, or contain a specific value within a specific attribute.

Solution CSS provides three attribute selectors for this purpose. CSS does not name them individually. I call them
the Attribute Existence Selector, the Attribute Word Selector, and the Attribute Value Selector. You can
append these attribute selectors to the end of any selector.
You can use the Attribute Existence Selector to select elements that contain a specific attribute. The
Attribute Existence Selector is the name of the attribute enclosed in straight brackets. For example,
p[title] selects all paragraphs containing the title attribute. If an element contains the attribute and
the attribute is assigned to a value, the Attribute Existence Selector matches it. The attribute may contain
any value, but some browsers will not match an empty attribute, such as

.
You can use the Attribute Word Selector to select elements that contain a specific word within a
specific attribute. The Attribute Word Selector is the opening straight bracket, the name of the attribute, a
tilde, an equal sign, the word in double quotes, and the closing straight bracket. For example,
p[title~="paragraph"] selects all paragraphs containing the word paragraph inside their title
attribute, such as

. The attribute may contain other words in addition to
the matching word. A word is separated from other words using spaces. The match is case-sensitive.
You can use the Attribute Value Selector to select elements that contain a specific value within a
specific attribute. The Attribute Value Selector is the opening straight bracket, the name of the attribute,
an equal sign, the value in double quotes, and the closing straight bracket. For example,
p[title="#4 paragraph"] selects all paragraphs containing the exact value #4 paragraph inside
their title attribute, such as p[title="#4 paragraph"]. The match is case-sensitive and must match
the entire attribute value including whitespace.
You can use any of the substring matching attribute selectors, like [attr^=val], [attr$=val], and
[attr*=val], in order to specify an element with the attr attribute whose value begins, ends, or just
contains "val".
You can also use multiple chained attribute selectors, e.g.,
a[href="http://www.example.com"][target="_blank"] to represent several attributes of an
element, or several conditions on the same attribute. Similar to type selectors, attribute selectors also
support namespacing.

Patterns

CSS

SELECTOR[attr] { STYLES } or SELECTOR[attr~="WORD"] { STYLES }

or

SELECTOR[attr="EXACT_MATCH_OF_ENTIRE_VALUE"] { STYLES }

or

SELECTOR[attr^="ATTRIBUTE_BEGINGS_WITH_VALUE"] { STYLES }

or

SELECTOR[attr$="ATTRIBUTE_ENDS_WITH_VALUE"] { STYLES }

or

SELECTOR[attr*="ATTRIBUTE_CONTAINS_VALUE"] { STYLES }

or

SELECTOR[“ATTRIBUTE_SELECTOR_1”][“ATTRIBUTE_SELECTOR_2”] { STYLES }

Location These design patterns apply to all elements.

Limitations Attribute selectors do not work in Internet Explorer 6. They work in Internet Explorer 7 and other major
browsers. CSS defines another selector that I call the Attribute Language Selector (e.g., [lang=en]),
but it is not well supported.

Related to Inheritance