javascript - CSS selector to match elements by attribute's name start - Stack Overflow

admin管理员组

文章数量:1221449

Is there any CSS selector to match these elements? (I need it for adblocker config, looked at W3C selectors document - no hints found there. Generic solution needed because part after data-d- gets randomized by the site).

<div data-d-9y3x>
<div data-d-m01>
<div data-d-whatever>

Is there any CSS selector to match these elements? (I need it for adblocker config, looked at W3C selectors document - no hints found there. Generic solution needed because part after data-d- gets randomized by the site).

<div data-d-9y3x>
<div data-d-m01>
<div data-d-whatever>

• javascript
• css
• css-selectors

Share Improve this question Follow edited Oct 20, 2021 at 10:25 Alireza Ahmadi 9,90377 gold badges2525 silver badges6161 bronze badges asked Nov 29, 2015 at 6:53 MaxMax 1,86733 gold badges2525 silver badges4242 bronze badges 1

• 2 As far as I know, the starts with match is possible only for attribute values and not the for the attribute name. You would more than likely have to use three selectors in CSS. – Harry Commented Nov 29, 2015 at 6:57

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 9

No, there is currently no way to select elements based on the presence of an attribute whose name is starting with a certain value. The starts with selection is only possible for attribute values.

Such a selector is not mentioned in the CSS Selectors Level 4 spec also and so it doesn't look like it would be available anytime soon.

You have the following choices:

• Use group of selectors with all possible attribute name values in the format element[attribute-name]. But this option is not viable when the exact attribute names are not fixed/unknown.
• Use JavaScript (or some other scripting library of your preference). Below is a very quick rough sample for the benefit of future visitors.

var el = document.getElementsByTagName('div');

for (var i = 0; i < el.length; i++) {
  var attr = el[i].attributes; /* get all attributes on the element */
  for (var j = 0; j < attr.length; j++) {
    if (attr[j].name.indexOf('data-') == 0) { /* if element has an attribute whose name has data- */
      el[i].style.color = 'red';
      break;
    }
  }
}

<div data-d-9y3x>Some</div>
<div data-d-m01>text</div>
<div data-d-whatever>content</div>
<div test-data-d-whatever>and</div>
<div d-whatever>more</div>
<div testdata-d-whatever>...</div>

With ES6+ you can use spread operator (...) and then filter those element that their attribute names' start with data-d-:

var res = [...document.querySelectorAll("*")]
    .filter(t => [...t.attributes]
                 .filter(({ name }) => name.startsWith("data-d-")).length > 0)

console.log(res);

<div data-d-9y3x>Some</div>
<div data-d-m01>text</div>
<div data-d-whatever>content</div>
<div test-data-d-whatever>and</div>
<div d-whatever>more</div>
<div testdata-d-whatever>...</div>

@Alireza_Ahmadi answer is very great and could be extended to use a primary node selector to target preciselly a qualified attribute...

Standard selector with jQ for a dedicated attr would be : jQuery('[role="field-form"]')

var res = [...(jQuery('[role="field-form"]').get())]
    .filter(t => [...t.attributes]
                 .filter(({ name }) => name.startsWith("formula_")).length > 0)

本文标签： javascriptCSS selector to match elements by attribute39s name startStack Overflow