How to select XML element by xlink:href attribute with CSS?

Question

Does anyone know how to select a XML element by xlink:href attribute with CSS?

See here for the usage, however it doesn't explain how to select it with CSS.

<book title="XQuery Kick Start">
  <description
    xlink:type="simple"
    xlink:href="http://book.com/images/XQuery.gif"
    xlink:show="new"> ... </description>
</book>

Answer 1

Using CSS attribute selectors, you'd need to escape the colon : by a leading backslash\, as follows:

description[xlink\:href="http://book.com/images/HPotter.gif"] {
  background-color: gold;
}

<?xml version="1.0" encoding="UTF-8"?>

<bookstore xmlns:xlink="http://www.w3.org/1999/xlink">
  <book title="Harry Potter">
    <description
      xlink:type="simple"
      xlink:href="http://book.com/images/HPotter.gif"
      xlink:show="new"> ... </description>
  </book>

  <book title="XQuery Kick Start">
    <description
      xlink:type="simple"
      xlink:href="http://book.com/images/XQuery.gif"
      xlink:show="new"> ... </description>
  </book>
</bookstore>

WORKING DEMO.

Answer 2

The only way that escaping the colon with a backslash could possibly work is if you were receiving the document as XML but outputting it as HTML, stripping it of all its XML semantics.

If you're styling the XML document directly with CSS, the correct way is to declare the xlink namespace at the top of your stylesheet according to the XLink spec, like so:

@namespace xlink 'http://www.w3.org/1999/xlink';

Then use an attribute selector with a namespace prefix to target your element:

description[xlink|href="http://book.com/images/XQuery.gif"] {
    /* Styles */
}