demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

CSSslidy: an auto-generated #RWD image slider. 1.5K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

The Attribute Selector

css / selectors

Estimated reading time: 1 minute, 25 seconds

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

Example 1:

abbr[title] { color: black; }

Matches:

<abbr title="International Business Machines">IBM

Matches every abbr element that has a title attribute.

Example 2:

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="/blog/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">
comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.