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-

Answer 1

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.