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>

Rimbaud

You might want to tell us how exactly you are receiving and consuming this XML. Although it is possible to use CSS to style XML or HTML, they are both very different, and answers to one may not always work for the other, as shown in my answer for example. – Terbia

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.

Peddler

@user3143218: I would be surprised if this actually worked with an XML document as indicated in the question. If you're not in fact handling it as XML, though, then no complaints. – Terbia

OK, I see that the original question had the [html] tag, so for all we know the OP could have intended to style it as HTML. You probably shouldn't have removed the tag then, especially if you were going to answer as if it were HTML anyway. – Terbia

@Terbia Oh, sorry, missed that. – Peddler

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

Terbia

Didn't work with SVG.use. For it use ` svg use[*|href="#mydef-id"] { } `. – Dobla

Answer 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;
}

Vereen