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

Question 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.

Question 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 */
}

Question 3

Treat it just like an ordinary html. Click the demo link below.

Demo

XML

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

<homepages xmlns:xlink="http://www.w3.org/1999/xlink">

<homepage xlink:type="simple"
xlink:href="http://www.w3schools.com">Visit W3Schools</homepage>

<homepage xlink:type="simple"
xlink:href="http://www.w3.org">Visit W3C</homepage>

</homepages>

CSS

homepage{
    color:red;
}