XHTML namespaces and CSS attribute selectors

Question

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!

BoltClock · Accepted Answer · 2015-11-18 14:35:38Z

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.)

edited Nov 18, 2015 at 14:35

answered Nov 18, 2015 at 14:24

BoltClock

728k165 gold badges1.4k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

David P. Caldwell Over a year ago

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 Over a year ago

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.

Mr Lister Over a year ago

@DavidP.Caldwell That's right, the content-type in the <meta http-equiv command can't change the file type, only the charset. (And the latter only if the charset was not specified in the actual http header or the xml declaration.)

user5147563 Over a year ago

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.

user5147563 Over a year ago

What's weird, w3c validator shows me parse errors when using the |

Collectives™ on Stack Overflow

XHTML namespaces and CSS attribute selectors

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related