I am trying to customize elements that have the xlink:href attribute in XHTML, but I am facing some difficulties with it. Here is the code I tested:
<!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"><p xlink:xref ...</p>
<p xyz:xref="aaa"><p xyz:xref ...</p>
<!-- correctly styled elements: -->
<p xlink:href="aaa"><p xlink:href ...</p>
<p xyz:href="aaa"><p xyz:href ...</p>
<xyz:p xlink:href="aaa"><xyz:p xlink:href ...</xyz:p>
<xyz:p xyz:href="aaa"><xyz:p xyz:href ...</xyz:p>
<xyz xlink:href="aaa"><xyz xlink:href ...</xyz>
<xyz xyz:href="aaa"><xyz xyz:href ...</xyz>
</body>
</html>
Upon testing in chrome 34 and firefox 30, I observed that the [xlink|href], [xyz|href] style rule does not get applied to XHTML's <p> elements, but works for <xyz:p> and <xyz> elements.
What could be causing this issue? Do namespaced CSS attribute selectors function differently with XHTML?
Update:
Namespaced CSS attribute selectors do work with XHTML, but not with HTML files. In my code, there were two issues that needed addressing:
There were typos in attributes
xlink:xrefandxyz:xref(thanks to BoltClock's answer). The code has been updated accordingly.A regular CSS rule should not precede any @namespace rules, otherwise the @namespace rules become invalid (my original post omitted the
font-sizerule at the beginning). Refer to 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 lack support for XML namespaces, namespaced CSS selectors generally don't work. However, because qualified element/attribute names are treated as simple names in HTML, these selectors will function in HTML:
[xlink\:href]:hover, [xyz\:href]:hover { ... }
xyz\:p, xyz { ... }
Interestingly, namespaced selectors targeting the XHTML namespace still work with HTML files, like so:
@namespace html "http://www.w3.org/1999/xhtml";
html|p { ... }
An exception to this is foreign content such as SVG, as suggested by @Alohci.