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


Tags: html,css,xml,css-selectors,xlink

Problem :

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>


Solution :

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.


    CSS Howto..

    Images not showing up in correct spot [closed]

    How can I embed a smartphone simulator in html5? [closed]

    CSS: How to produce rounded boxed list

    Symfony2 Form Type - how to set form CSS class as attribute?

    How do I create 3D perspective using CSS3?

    How to parse CSS font shorthand format

    How to style the tick mark checkbox using css without using images?

    How to get the values of the css style attributes in gwt

    Multiple css styles applied to one element, how to force one style over the other

    How can I create custom scrollbar (jScrollPane) with knockout binding?

    How to chain multiple -webkit-transition animations in my css without keyframes

    How to add css into .scss file or theme

    How to get the first parent that has a certain CSS property using jQuery?

    How to stop image shrinking when page is resized horizontally in CSS

    How to find equivalent property in Mozilla of given Webkit CSS property

    How to make Visual Studio stop “compiling” .js and .css files

    How to create this type of element using XHTML & CSS?

    Show bigger image on thumbnail's hover

    CSS property padding-top only works on the first element of a list. How do I apply to all the elements?

    How do you create boxes like github's explore section?

    How to create a div in the same size as the contained image. Both should be responsive

    How to style a form element when an input is focused?

    How to align an image inside a DIV without adding new classes using CSS

    How To Display only First Word of H2 Heading With JavaScript or CSS

    how to add border to image css on blogger

    How to add tags/images on javascript fetched textarea data?

    How to Triger a css animation for a y element from a a trigger x

    How does CSS3 flexbox negative-flex work?

    How to cancel out .table width:100% in bootstrap css

    How to let users have the latest non cached code?