2

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>
Dave Mackintosh
  • 2,738
  • 2
  • 31
  • 40
  • Not sure but `[data-common*]` could work? – Koen. Apr 18 '14 at 22:04
  • It does not, I've tried that and it gives me an invalid selector error. – Dave Mackintosh Apr 18 '14 at 22:05
  • 1
    Take a look at this http://stackoverflow.com/questions/12199008/find-html-based-on-partial-attribute. I think it is what you are looking for. – Patrick Allen Apr 18 '14 at 22:10
  • It is not. That is for writing a jQuery selector. I don't like or use jQuery unless it is **totally** necessary. I'm trying to write a selector not a filter function that that post is writing, these are similar but not the same problem/question. – Dave Mackintosh Apr 18 '14 at 22:11

1 Answers1

2

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.

zzzzBov
  • 174,988
  • 54
  • 320
  • 367