CODEWITHSUNDEEP
htmlcssxmlcss-selectorsxlink
user3143218
user3143218

Reputation: 1816

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

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>

Upvotes: 7

Views: 8838

Answers (3)

BoltClock
BoltClock

Reputation: 724452

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

Upvotes: 6

Hashem Qolami
Hashem Qolami

Reputation: 99554

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.

Upvotes: 8

Adrian Enriquez
Adrian Enriquez

Reputation: 8413

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

Upvotes: -1

Related Questions