1. Home
  2. Computing & Technology
  3. Web Design / HTML

Cascading Style Sheets 2 Attribute Selectors
For More Granular Style Applications

By , About.com Guide

With CSS2 we can now use the attributes of elements to help define our styles. Before, the only attribute you could use was the "class" attribute. But now, you match any attribute an element might have to define styles for it.

There are four ways to match attributes:

  • [att]
    This will match the element(s) with that attribute, no matter what the attribute value is.

    a[title] { color : #00f; }
    All a elements with a title attribute are colored blue.

  • [att=val]
    This will match the element(s) with the attribute that has a value of exactly "val".

    a[title="Web Design/HTML"] { color : #00f; }
    All a elements with the title "Web Design/HTML" are colored blue.

  • [att~=val]
    This will match the element(s) with an attribute that has a space separated list of values, one of which is exactly "val".

    a[rel~="help"] { color : #00f; }
    All a elements with a rel attribute with "help" in it are colored blue. This would match <a rel="help index"> and <a rel="index help">

  • [att|=val]
    This will match the element(s) with an attribute that has a hyphen separated list of values, one of which is exactly "val".

    a[lang|="en"] {color : #00f; }
    All a elements with a lang attribute of en are colored blue. This would match <a lang="en">, <a lang="en-us">, and <a lang="en-australian">

Browser Support

Internet Explorer 6 and lower (Windows) and 5 and lower (Macintosh) don't support this selector. Nor does Netscape 4 or Opera 3.

Explore Web Design / HTML
About.com Special Features

Holiday Central

What to eat, where to go, fun things to do and how to save money on the perfect gifts. More >

Family Tech Center

Stay connected and entertained with reviews on tips on the latest HDTVs, cellphones and more. More >

  1. Home
  2. Computing & Technology
  3. Web Design / HTML

©2009 About.com, a part of The New York Times Company.

All rights reserved.