Do CSS namespace attribute selectors work with XHTML/HTML elements?
css, css-selectors, html, xhtml, xml-namespaces
Solution
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.
Problem
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.