Do CSS namespace attribute selectors work with XHTML/HTML elements?

Question

I want to style elements with xlink:href attribute in a XHTML, however I can't make it work. My test code:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
    xmlns:xyz="http://xyz.org">
<head>
<meta charset="UTF-8" />
<title>css namespace</title>
<style>
body { font-size: 20px; } /* Oops! A normal rule must not precede @namespace rules! */
@namespace html "http://www.w3.org/1999/xhtml";
@namespace xlink "http://www.w3.org/1999/xlink";
@namespace xyz "http://xyz.org";
html|p {
  color: blue;
}
[xlink|href], [xyz|href] {
  cursor: pointer;
  text-decoration: underline;
  color: red;
}
xyz|p, xyz {
  display: block;
}
</style>
</head>
<body>
<!-- typos: 'xref' should be 'href', thank BoltClock's answer! -->
<p xlink:xref="aaa">&lt;p xlink:xref ...</p>
<p xyz:xref="aaa">&lt;p xyz:xref ...</p>
<!-- correctly styled elements: -->
<p xlink:href="aaa">&lt;p xlink:href ...</p>
<p xyz:href="aaa">&lt;p xyz:href ...</p>
<xyz:p xlink:href="aaa">&lt;xyz:p xlink:href ...</xyz:p>
<xyz:p xyz:href="aaa">&lt;xyz:p xyz:href ...</xyz:p>
<xyz xlink:href="aaa">&lt;xyz xlink:href ...</xyz>
<xyz xyz:href="aaa">&lt;xyz xyz:href ...</xyz>
</body>
</html>

When I test it in chrome 34 and firefox 30, I note that the [xlink|href], [xyz|href] rule isn't applied to XHTML's <p> elements, but is applied to <xyz:p> and <xyz> elements.

Why this happen? Don't namespaced CSS attribute selectors work with XHTML?

Update:

Yes, namespaced CSS attribute selectors work with XHTML, but not HTML. My code actually has 2 problems:

There are typos for attributes xlink:xref and xyz:xref (thank BoltClock's answer). I updated the code.
A normal CSS rule must not precede any @namespace rules, or the @namespace rules are invalid (my original post missed the font-size rule at the beginning). See CSS Namespaces Module Level 3:

Any @namespace rules must follow all @charset and @import rules and precede all other non-ignored at-rules and style rules in a style sheet.

Update 2: For HTML files, which doesn't support XML namespace, namespaced CSS selectors generally don't work with it. However, because qualified element/attribute names are treated as simple names in HTML, these selectors work with HTML:

[xlink\:href]:hover, [xyz\:href]:hover { ... }
xyz\:p, xyz { ... }

Interestingly, namespaced selectors that targeting XHTML namespace still work with HTML files, like this:

@namespace html "http://www.w3.org/1999/xhtml";
html|p { ... }

Another exception is foreign content such as SVG, suggested by @Alohci.

Are you serving the document as Content-Type: application/xhtml+xml? — Quentin
– Quentin, Commented Jul 8, 2014 at 10:04
I use .xhtml extension and test it locally, this should ensure application/xhtml+xml mime type. — Duan Yao
– Duan Yao, Commented Jul 8, 2014 at 10:09
If you want to use XML namespace you have to use a XML document. You current version looks like plain HTML. Set a XML header and use the correct content type to deliver that file. — feeela
– feeela, Commented Jul 8, 2014 at 10:42
I think the question title is back to front. XML/HTML elements do not support CSS at all, nor do they support CSS namespaces. — feeela
– feeela, Commented Jul 8, 2014 at 10:44
It's a bit more complicated than just namespaced CSS attribute selectors don't work in HTML. Mostly they don't. In a few special cases they do. xlink:href, when it appears in foreign content such as SVG, is one such special case. For example, see jsfiddle.net/Kqr3M — Alohci
– Alohci, Commented Jul 8, 2014 at 19:44

BoltClock · Accepted Answer · 2014-07-08 12:04:53Z

4

They do. You've just set up either your markup or your CSS rules incorrectly.

Your attribute selectors are looking for elements with href attributes (in the respective namespaces), but your <p> elements have xref attributes, not href attributes, so they don't match.

Your <xyz:p> and <xyz> elements on the other hand all have href attributes, so those are the ones that end up matching your attribute selectors instead.

edited Jul 8, 2014 at 12:04

answered Jul 8, 2014 at 10:55

BoltClock

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

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

1 Comment

Duan Yao Over a year ago

Thank you very much! The xrefs are typos in the test code above, and my production code has another problem: style rules before @namespace rules. I updated my question to reflect this.

Collectives™ on Stack Overflow

Do CSS namespace attribute selectors work with XHTML/HTML elements?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related