The Attribute Selector

Attribute selectors are another area of CSS that have historically been underused and unappreciated, partly due to a historical lack of support in IE. However, the selectors that I am about to show you are supported in every modern browser, including IE7+.

Attribute selectors are a simple form of regular expression pattern matching for CSS, and one of the tools we can use to reduce additions to our markup, which is always a good thing; as a general rule, the more markup we can eliminate the easier our HTML and CSS becomes to create and maintain, and the more consistent our site appears.

Simple Attribute selector

Example 1:

1. abbr[title] { color: black; }

Matches:

1. <abbr title=”International Business Machines”<IBM>/abbr>

Example 2:

1. input[required] { background: white; }

Matches:

1. <input type=number required>

Matches every element that uses the stated attribute, no matter what the value of the attribute might be. I don’t find this version of the selector terribly useful, as most elements will feature shared uses of an attribute. What comes next gets more interesting:

Attribute value selector

1. input[type="submit"] { color: orange; }

Matches:

1. <input type=”submit”>

(Note the lack of spaces in the selector)

Very useful for selecting form elements, among other purposes. However, the exact value of the attribute must be known. That is not the case with the next set of selectors.

Separated attribute value selector

1. img[alt~=Zealand] { border: 3px solid green; }

Matches:

1. <img alt=”New Zealand” … >

Whereas the standard attribute selector looks for an exact matching value, the ~= CSS attribute selector will match a value from a space-separated list.

CSS3 adds three variations to the attribute selector:

Attribute “starts with” value selector

1. a[href^="/blog"]

Matches:

1. <a href=”/blog/all-about-attribute-selectors>

Matches an attribute value that starts with a set of characters.

Attribute “ends with” value selector

1. p[class$=”ed”]

Matches:

1. <p class=educated>

Also matches:

1. <p class=reed>

Attribute “includes” value selector

1. a[class*=”on”]

Matches:

1. <a class=bonobo>