3

I can't figure out how to get CSS attribute selectors to style elements based on namespaced attributes without resorting to the ordinary HTML name of the namespaced attribute (including the colon).

Example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:foo="https://stackoverflow.com/foo">
 <head>
  <title>CSS Attribute Selectors with namespaces</title>
  <style>
   @namespace foo "http://www.stackoverflow.com/foo";
   span[foo|id=bar] { font-family: monospace; font-weight: bold; }
  </style>
 </head>
 <body>
  <span foo:id="bar">Should be monospace bold</span>
 </body>
</html>

Test case:

I opened the file in both Chrome and Firefox by typing the appropriate file:/// URL into my address bar; in neither case does it show up correctly. It also does not show up correctly on Stack Overflow.

If I change the snippet to include the HTML attribute name:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:foo="https://stackoverflow.com/foo">
 <head>
  <title>CSS Attribute Selectors with namespaces</title>
  <style>
   @namespace foo "http://www.stackoverflow.com/foo";
   span[foo\:id=bar] { font-family: monospace; font-weight: bold; }
  </style>
 </head>
 <body>
  <span foo:id="bar">Should be monospace bold</span>
 </body>
</html>

... it works correctly (both using my local browser and on the Stack Overflow snippet).

I've read the set of gotchas included in Can you style XHTML elements in another namespace using id and class name css selectors? and Do CSS namespace attribute selectors work with XHTML/HTML elements? but I have not yet been able to figure this out; I believe I've done everything both questions' answers suggest.

Removing the DOCTYPE didn't do it, although I suspect some kind of DOCTYPE problem given that the HTML form works and the XHTML form does not.

I must be missing something simple!

Community
  • 1
  • 1
David P. Caldwell
  • 3,394
  • 1
  • 19
  • 32

1 Answers1

3

Your document needs to be processed as an XHTML document for the XML namespaces to work. Note that having an XHTML DOCTYPE and the relevant xmlns attributes is not enough.

You do this on the server side by serving the document as Content-Type: application/xhtml+xml, or on the file system by saving the document with a .xhtml file extension instead of .html. For a very quick and dirty test case you can even copy your entire markup, drop it in the address bar, prepend data:application/xhtml+xml,, and navigate to the resulting data URI.

This is mentioned in very brief passing by the first question you link to:

If I switched the mime-type to application/xhtml+xml

Note also that the namespace in your CSS must exactly match the namespace in the markup. @namespace foo "http://www.stackoverflow.com/foo"; does not match xmlns:foo="http://stackoverflow.com/foo" because of the www.. (Interestingly, the foo identifiers do not need to match, because unlike the namespaces themselves the identifiers are separate.)

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • excellent, I'll fix the typo in the namespaces (obviously my quick-n-dirty copy-paste-modify from my real project introduced a regression), and then I'll try the rest on my browser. – David P. Caldwell Nov 18 '15 at 19:34
  • Renaming the file to .xhtml does it. I also tried a meta http-equiv to set the content type (without renaming the file); that did *not* do it. – David P. Caldwell Nov 19 '15 at 11:34
  • @DavidP.Caldwell That's right, the content-type in the ` – Mr Lister Nov 21 '15 at 07:55
  • I know this is a bit old question, but I'm experiencing same problems. I'm trying to use namespaces in attribute selectors in HTML5, not XHTML - how do I do it? Everything is correct, namespace link too. –  Aug 09 '17 at 10:11
  • What's weird, w3c validator shows me parse errors when using the `|` –  Aug 09 '17 at 10:19