In CSS2 the basic attribute selector syntax is E[foo], where foo is an attribute declared in the element E. Other variants include E[foo="value"], E[foo~="value"], and E[foo=|="value"].

For example, given the element <span id="highlight"> we can refer to it in the stylesheet as span#highlight or as span[id="highlight"]. If we want to style all span elements with an id attribute we can use the selector span[id].

In XHTML documents it is common practice to write the root element as thus:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

Using CSS2 attribute selector syntax the following selectors should all be valid and should match the above element:

	html[xmlns]

	html[xmlns="http://www.w3.org/1999/xhtml"]

	html[lang="en"]

Current browsers in use, however, vary in their implementation of CSS specifications. The attribute selector, among others, is not widely supported. NS4.x, IE6 and older do not. Opera6, Mozilla1.0, NS6.x and higher, on the other hand, all understand the selector.

However, Opera fails to recognize the attribute xmlns. Because this attribute usually occurs only in the root element and since all other elements are descended from html we can exploit this bug and easily create selectors which Opera will not recognize. Needless to say this hack will only work with XHTML documents where the xmlns attribute is declared in the root element.

The following are the basic selectors which we can use to hide CSS rules from Opera as well as other browsers that do not understand the attribute selector:

	html[xmlns]
	
	[xmlns]

The second syntax is equivalent to the form *[xmlns], which means "any element with an xmlns attribute." If xmlns is not declared in any other element except the root element (which is most often the case) then the second syntax serves as a shorthand.

Some Examples

div id="normal"

This block should render as gray text on a light gray background on most CSS-aware browsers. No hacks are employed in the CSS rule for this block.

div id="onlyGeckoForNow"

This block on the other hand should display white italicized text against a green background for browsers that understand the attribute selector syntax and recognize the xmlns attribute. As of August 2002 only Gecko-based browsers such as Mozilla and Netscape 7 do.

The CSS rules for the above are as follows:

	div#normal, div#onlyGeckoForNow
	{
		margin: 1em;
		padding: 1em;
		background: #eee;
	}

	[xmlns] div#onlyGeckoForNow
	{
		background: #090;
		color: white;
		font-style: italic;
	}

One CSS value that Opera does not yet apply correctly is inherit. For instance when this value is specified for the font-size property Opera automatically reduces the font size to just a few pixels making the text illegible. This hack can therefore be used to hide any property that must have a value of inherit

In certain pages it may be useful to have links inherit the color of the surrounding text rather than stand out with its own color. As it is the hyperlink element defaults to the color blue on most browsers. The easiest way to force the element to take on the color of the surrounding text it is embedded in is to specify a {color: inherit}. Unfortunately, neither Opera nor IE will correctly implement this. But Netscape 6.x and higher and Mozilla do recognize and implement this value. What we can do, therefore, is to serve these inherit-aware browsers the following rule which Opera and IE will ignore

	[xmlns] a
	{
		color: inherit;
		text-decoration: underline;
	}

We can then either create another rule for Opera and IE and have links in those browsers have a certain color or simply let these browsers display them in blue.