How to use CSS attribute selector for an SVG element with namespaced attribute href?

Question

Why can\'t I select elements by their href-attribute?

CSS

/* Works */
svg image[type=overlay]{
    outline: 3px solid blue;
}

/* Doesn         


        

Answer 1

Demo Fiddle

Firstly, in order to use xlink slectors, you need to to declare the xlink namespace at the top of your stylesheet according to the spec:

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

Then, you can use the following attribute selector with a namespace prefix:

svg image[xlink|href*="temp"] {
    outline: 3px solid red;
}

The attribute name in an attribute selector is given as a CSS qualified name: a namespace prefix that has been previously declared may be prepended to the attribute name separated by the namespace separator "vertical bar" (|). In keeping with the Namespaces in the XML recommendation