Part of the CSS Selectors Reading List

Attribute selectors are another area of that have historically been underused and unappreciated, partly due to a historical lack of support in . 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 you can eliminate the easier your HTML and CSS becomes to create and maintain, and the more consistent your site appears.

Simple Attribute selector

abbr[title] { color: black; }

Matches: 

<abbr title="International Business Machines">IBM

Matches every abbr element that has a title attribute. 

input[required] { background: white; }

Matches: 

<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

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

Matches: 

<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

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

Matches: 

<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

a[href^="/blog"]

Matches: 

<a href="/all-about-attribute-selectors">

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

Attribute “ends with” value selector

p[class$="ed"]

Matches: 

<p class="educated">

Also matches: 

<p class="reed">

Attribute “includes” value selector

a[class*="on"]

Matches: 

<a class="bonobo">

Case sensitivity

CSS Selectors Level 4 adds a case-insenstive flag: 

input[type="submit" i]

The selector above will match <input type="SUBMIT">, <input type="submit">, and any other combination. Right now only Chrome supports this option, while other browsers don’t yet make the distinction between uppercase and lowercase for attribute values (and are confused by the case-insensitive flag), so I can't recommend using it in production yet.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.