Menu
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"><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>
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.
802
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.
136
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
