I received a large number of questions after my last blog post, 100% pure css radial progress bar, about the attribute selector I used so I figured a quick followup post detailing the 7 (at the time of writing) available attribute selectors across CSS2 and CSS3.

Attribute Selector Syntax

[attributeName{selector}value]

Attribute Selectors

[user]
/* matches */
<div user></div>
<div user="foo"></div>

Any element which has a user attribute regardless of value.

[user=foo]
/* matches */
<div user="foo"></div>

Any element which has a user attribute with the exact value foo.

[user~=bar]
/* matches */
<div user="foo bar"></div>
<div user="bar"></div>

Any element which has a user attribute with the exact value bar or the value bar in a whitespace-separated list.

[user|=baz]
/* matches */
<div user="baz"></div>
<div user="baz-bar"></div>

Any element which has a user attribute with the exact value baz or a value starting with baz followed by a “-”.

[user^=foo]
/* matches */
<div user="fooBar"></div>

Any element which has a user attribute with a value that starts with foo.

[user$=bar]
/* matches */
<div user="foobar"></div>

Any element which has a user attribute with a value that ends with bar.

[user*=baz]
/* matches */
<div user="foobazbar"></div>

Any element which has a user attribute with a value that has baz anywhere in it.

If you don’t have to support IE 6 you’re in luck because you should have full support for all of these all the way back to IE 7. As usual feel free to let me know your thoughts below or mention me on twitter @fromanegg - Happy selecting!