selectors-api for data attributes
- by MJ
In HTML5, CSS selectors seem to operate well with data-* attributes. For example:
<style>
div[data-foo='bar'] {
background:#eee;
}
</style>
<div data-foo='bar'>colored</div>
<div>not colored</div>
will properly style the first . But, attempts to select such elements using the selectors-api fail. Examples:
var foos = document.querySelectorAll("div[data-foo]='bar'");
or
var foos = document.querySelectorAll("div data-foo='bar'");
in Chrome and Safari, this produces a cryptic error:
SYNTAX_ERR: DOM Exception 12
Any thoughts on how to use the selectors-api to properly select elements on the basis of data-* attributes?
