Can you style XHTML elements in another namespace using id and class name css selectors?

Question

I'm developing an application that uses ubiquity-xforms. Previously I had been serving the pages up as text/html with the XHTML 1.0 doctype. If I switched the mime-type to application/xhtml+xml, I would see a pretty big performance improvement, because the javascript could use the get____NS() functions, instead of what it's doing now (slowly iterating through the entire DOM tree every time it needs to select an element). But when I tried this, a bunch of my CSS stopped working. I noticed that when I inspected the elements, either in Firebug or in the WebKit Nightly Web Inspector, the point of failure were '.classname' and '#id' css selectors on elements in the XFORMS namespace. I also noticed that in the listed DOM properties for those elements they were lacking both 'id' and 'className' attributes. My question is, is there a way that I can get the UA to recognize these as classes and ids? Things I've tried, to no avail: - specifying the "id" attributes as ID in an inline doctype's AT…

Accepted Answer

Frankie,

porneL's answer is right -- in XHTML mode you have to use different CSS rules, because there is nothing 'special' about `@id` an `@class`.

Even armed with this knowledge, your problems aren't over though. :)

The temptation might be to just put HTML and XHTML CSS selectors together, and apply them to the same rule:

```
@namespace xf url(http://www.w3.org/2002/xforms);

xf\:input.surname, xf|input[class~="surname"] {
  color: green;
}
```

However, a further problem is that IE will ignore the entire rule, because it doesn't like the XHTML syntax. So littered through Ubiquity XForms you'll see things like this:

```
@namespace xf url(http://www.w3.org/2002/xforms);

xforms\:hint.active, xf\:hint.active {
  display: inline;
}

xf|hint[class~="active"] {
  display: inline;
}
```

As you can see we've had to repeat the styling with different selectors. (This is something we're hoping to address with a function that will abstract out the style-setting task. Then you'll only have to write one rule.)

Note a couple of extra things:

- that the HTML rules are using ':' as a literal character (hence the '\' to escape), and know nothing of namespaces;

- the XHTML CSS rules use the '~=' operator, which means that the attribute must contain the value specified, rather than be exactly equal to it.

Can you style XHTML elements in another namespace using id and class name css selectors?

Solution

Problem