JavaScript/CSS selector for attribute name pattern

Question

Assuming I have the following markup

<div data-common-notcommon="anyValue">
    <!-- Whatever.. -->
</div>

<div data-common-not-commonerthing="anyValue">
    <!-- Whatever.. -->
</div>

I'm trying to write a JS selector (or a CSS selector, don't care for the difference..) to find attributes based on a common, partial attribute name.

I.E I want to find all the elements that start with data-common.

I can't find anything on Google for attribute name selectors but rather attribute value selectors which I don't really want to do.

<script>
  document.querySelectorAll('[data-common]'); // []
  document.querySelectorAll('[data-common*]'); // []
  // etc..
</script>

Answer 1

Currently there are no selectors defined to partially match attribute names. What you're asking for doesn't exist.

For JavaScript you could filter a collection of elements using custom code (that is what jQuery does), but it will not work with document.querySelectorAll, nor can you define a custom selector for CSS, unless you're willing to suggest it on the w3c mailing list and deal with navigating the complex workflow that's involved in changing the CSS language.