Menu
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!
288
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.)
53
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
