I am working with EPUB.JS, which uses the following code to get some information from an ePub file:
var navEl = navHtml.querySelector('nav[*|type="toc"]')
This line of code fails in IE10, as the querySelector returns null. I've never seen an attribute selector in the format [*|attr="val"] before, but what I think they were trying to say was, "Select all nav elements with any attribute or an attribute named 'type' with value 'toc'."
I couldn't find any information on this star-pipe syntax, but I presume it is some sort of logical OR command that works in Webkit/Mozilla but not in IE.
Altering that line to read:
var navEl = navHtml.querySelector('nav')
works, but I still wanted to fully understand why they may have chose that other syntax when I feel like it meaningless, just in case it has an actual purpose that could lead to errors elsewhere.
Is there any explanation for this *|... and is it even necessary?
The namespace| syntax applies to type selectors as well as attribute selectors (and possibly others). This essentially says "match nav with type=toc where type is in any namespace (including no namespace)." It would match:
<nav foo:type="toc">
If the selector were just [type=toc], the above element would not be selected because it is in a namespace.
http://www.w3.org/TR/css3-selectors/#attrnmsp
The fact that this doesn't work in IE10 is probably an error on IE's side. To be honest I've never even seen namespaces used in any HTML I've seen, although I'm sure it happens a lot. You can probably get away with just leaving off the *|, but it's important that you understand why it's there before you make that decision.