Sept. 22, 2000 > Tag of the Week
Attribute Sectors in One Quick Bite
Last week, we looked into the new kinds of element selectors defined in the CSS2 standard. These new selectors allow you to apply style properties based upon element parent/child and adjacency relationships in your documents. We continue this look at the new CSS2 selectors with the attribute selectors.
General Attribute Selectors
CSS1 allowed the selection of elements based upon the element name alone. CSS2 extends this to include attributes associated with the element, using a special syntax. When an element in a selector is followed by a name in square brackets, that name is taken to be an attribute of the element and must be present for the rule to be applied to the element.
This is easier to see in an example:
img[align] { border-width : 0 }
This style property would only be applied to <img> elements that have the align attribute specified. If the attribute is missing, the rule is not applied.
You can extend this idea to include several attributes. For example,
img[align][border] { margin : 10pt }
is only applied to <img> elements with both the align and border attributes present.
To make things even more general, CSS2 introduces the special selector *, which matches any element. It comes in handy when you want to match any element with a specific attribute mentioned. For instance:
*[align]
will match any element with the align attribute set.
Attribute Value Selectors
For those cases where just having the attribute present is not enough, CSS2 also lets you dictate the value of the attribute. If you follow an attribute name in a selector with an equal sign and a string, not only must the attribute be present, it must have that exact value to let the element be selected for that style property. To further refine our <img> example, you could say
img[align=left] { margin : 10pt}
to single out only those <img> elements whose align attribute is set to left. Note that this match only occurs if the attribute is explicitly set in the document itself. Even if left were the default value for align, the match would not take place unless you explicitly set align to left in your document.
CSS2 defines a number of ways to match a string. The plain = exactly matches the string, spaces and all. Using ~= matches any occurrence of the string as a space-delimited word in the attribute value. In this case, there may not be any spaces in the string, since they are considered delimiters in the attribute value for matching purposes. For example,
img[alt~=copy] { border : 0pt }
would match this image tag
<img alt="This is a copy of the original" />
since "copy" is a word in the alt attribute's value, but not this one
<img alt="This was made by copying the original">
since "copy" does not exist as a standalone word in the alt attribute.
In a similar vein, using |= as the matching operator matches the string against a hyphen-delimited word in the attribute value. This odd little feature is intended to allow matching of parts of ISO language names, which are delimited by hyphens. Thus, you might use
*[lang|=fr] { display : none }
to hide any element in your document whose lang attribute has "fr" as part of its value. This hides any French content in your document, in case you ever have such a need.
Class Selectors
Those of you who followed our original articles on CSS1 may realize that the CSS1 class selector, which applied a rule only to an element whose class attribute had a certain value, is a special case of the more general CSS2 attribute value matching. In fact, these two notations are equivalent:
H1.title H1[class=title]
In either case, any properties associated with these rules would be applied to any <h1> element whose class attribute is set to title. Given its shorter syntax, you should continue to use the traditional CSS1 class selection model instead of the CSS2 attribute value matching model when creating rules for specific element classes.
Chuck is the author of the best-selling HTML: The Definitive Guide and now, the fourth and expanded edition HTML & XHTML: The Definitive Guide. He also writes on a variety of Internet and Web-related topics for a number of online magazines.
Previously in Tag of the Week
CSS2 Standard Tour: Begin Here
