Skip to main content
本文に 738 文字追加
ソース リンク
supa
  • 5,399
  • 4
  • 18
  • 41

ありません。

http://www.w3.org/TR/css3-selectors/#attribute-selectors には attr^=val などの val の部分には identifier もしくは string しか指定できない=それらを指定しなればならない(must be)とあります。

Attribute values must be CSS identifiers or strings.

そして identifier および string そのどちらにもワイルドカードや正規表現を用いた記法は定義されていません。そのため純粋なCSSセレクタだけでは、そのようなマッチは実現できません。

ただし、jQueryはSizzleにより実装されたCSSセレクタを使っているでしょうから、拡張APIを用いて、そのようなセレクタを独自に定義することはできるでしょう。


追記: 気になってしまったので jQuery の custom selector を試してみました。 結果、以下の様なコードを追加することで jQuery の selector を自分で定義し、拡張できました。

jQuery.extend(jQuery.expr[":"], {
    "id-foo-num": function (el) {
        return el.id.match(/^foo-\d+/);
    }
});

利用する時は jQuery(":id-foo-num") のように pseudo selector を使います。

すぐに試せるソースは jsfiddle に置いておきます。 http://jsfiddle.net/koron/eaq6p4j4/

var output = jQuery('#output');

jQuery.extend(jQuery.expr[":"], {
  "id-foo-num": function(el) {
    return el.id.match(/^foo-\d+/);
  }
});

jQuery(":id-foo-num").each(function() {
  output.append(jQuery("<span>" + this.id + ":" + this.innerText + "</span><br />"));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <div id="foo">NG</div>
  <div id="foo-bar">NG</div>
  <div id="foo-1">OK</div>
  <div id="foo-23">OK</div>
  <div id="foo-999">OK</div>
</div>
<hr />
<div id="output">
</div>

ありません。

http://www.w3.org/TR/css3-selectors/#attribute-selectors には attr^=val などの val の部分には identifier もしくは string しか指定できない=それらを指定しなればならない(must be)とあります。

Attribute values must be CSS identifiers or strings.

そして identifier および string そのどちらにもワイルドカードや正規表現を用いた記法は定義されていません。そのため純粋なCSSセレクタだけでは、そのようなマッチは実現できません。

ただし、jQueryはSizzleにより実装されたCSSセレクタを使っているでしょうから、拡張APIを用いて、そのようなセレクタを独自に定義することはできるでしょう。


追記: 気になってしまったので jQuery の custom selector を試してみました。 結果、以下の様なコードを追加することで jQuery の selector を自分で定義し、拡張できました。

jQuery.extend(jQuery.expr[":"], {
    "id-foo-num": function (el) {
        return el.id.match(/^foo-\d+/);
    }
});

利用する時は jQuery(":id-foo-num") のように pseudo selector を使います。

すぐに試せるソースは jsfiddle に置いておきます。 http://jsfiddle.net/koron/eaq6p4j4/

ありません。

http://www.w3.org/TR/css3-selectors/#attribute-selectors には attr^=val などの val の部分には identifier もしくは string しか指定できない=それらを指定しなればならない(must be)とあります。

Attribute values must be CSS identifiers or strings.

そして identifier および string そのどちらにもワイルドカードや正規表現を用いた記法は定義されていません。そのため純粋なCSSセレクタだけでは、そのようなマッチは実現できません。

ただし、jQueryはSizzleにより実装されたCSSセレクタを使っているでしょうから、拡張APIを用いて、そのようなセレクタを独自に定義することはできるでしょう。


追記: 気になってしまったので jQuery の custom selector を試してみました。 結果、以下の様なコードを追加することで jQuery の selector を自分で定義し、拡張できました。

jQuery.extend(jQuery.expr[":"], {
    "id-foo-num": function (el) {
        return el.id.match(/^foo-\d+/);
    }
});

利用する時は jQuery(":id-foo-num") のように pseudo selector を使います。

var output = jQuery('#output');

jQuery.extend(jQuery.expr[":"], {
  "id-foo-num": function(el) {
    return el.id.match(/^foo-\d+/);
  }
});

jQuery(":id-foo-num").each(function() {
  output.append(jQuery("<span>" + this.id + ":" + this.innerText + "</span><br />"));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <div id="foo">NG</div>
  <div id="foo-bar">NG</div>
  <div id="foo-1">OK</div>
  <div id="foo-23">OK</div>
  <div id="foo-999">OK</div>
</div>
<hr />
<div id="output">
</div>

本文に 400 文字追加
ソース リンク
KoRoN
  • 5,182
  • 1
  • 17
  • 35

ありません。

http://www.w3.org/TR/css3-selectors/#attribute-selectors には attr^=val などの val の部分には identifier もしくは string しか指定できない=それらを指定しなればならない(must be)とあります。

Attribute values must be CSS identifiers or strings.

そして identifier および string そのどちらにもワイルドカードや正規表現を用いた記法は定義されていません。そのため純粋なCSSセレクタだけでは、そのようなマッチは実現できません。

ただし、jQueryはSizzleにより実装されたCSSセレクタを使っているでしょうから、拡張APIを用いて、そのようなセレクタを独自に定義することはできるでしょう。


追記: 気になってしまったので jQuery の custom selector を試してみました。 結果、以下の様なコードを追加することで jQuery の selector を自分で定義し、拡張できました。

jQuery.extend(jQuery.expr[":"], {
    "id-foo-num": function (el) {
        return el.id.match(/^foo-\d+/);
    }
});

利用する時は jQuery(":id-foo-num") のように pseudo selector を使います。

すぐに試せるソースは jsfiddle に置いておきます。 http://jsfiddle.net/koron/eaq6p4j4/

ありません。

http://www.w3.org/TR/css3-selectors/#attribute-selectors には attr^=val などの val の部分には identifier もしくは string しか指定できない=それらを指定しなればならない(must be)とあります。

Attribute values must be CSS identifiers or strings.

そして identifier および string そのどちらにもワイルドカードや正規表現を用いた記法は定義されていません。そのため純粋なCSSセレクタだけでは、そのようなマッチは実現できません。

ただし、jQueryはSizzleにより実装されたCSSセレクタを使っているでしょうから、拡張APIを用いて、そのようなセレクタを独自に定義することはできるでしょう。

ありません。

http://www.w3.org/TR/css3-selectors/#attribute-selectors には attr^=val などの val の部分には identifier もしくは string しか指定できない=それらを指定しなればならない(must be)とあります。

Attribute values must be CSS identifiers or strings.

そして identifier および string そのどちらにもワイルドカードや正規表現を用いた記法は定義されていません。そのため純粋なCSSセレクタだけでは、そのようなマッチは実現できません。

ただし、jQueryはSizzleにより実装されたCSSセレクタを使っているでしょうから、拡張APIを用いて、そのようなセレクタを独自に定義することはできるでしょう。


追記: 気になってしまったので jQuery の custom selector を試してみました。 結果、以下の様なコードを追加することで jQuery の selector を自分で定義し、拡張できました。

jQuery.extend(jQuery.expr[":"], {
    "id-foo-num": function (el) {
        return el.id.match(/^foo-\d+/);
    }
});

利用する時は jQuery(":id-foo-num") のように pseudo selector を使います。

すぐに試せるソースは jsfiddle に置いておきます。 http://jsfiddle.net/koron/eaq6p4j4/

ソース リンク
KoRoN
  • 5,182
  • 1
  • 17
  • 35

ありません。

http://www.w3.org/TR/css3-selectors/#attribute-selectors には attr^=val などの val の部分には identifier もしくは string しか指定できない=それらを指定しなればならない(must be)とあります。

Attribute values must be CSS identifiers or strings.

そして identifier および string そのどちらにもワイルドカードや正規表現を用いた記法は定義されていません。そのため純粋なCSSセレクタだけでは、そのようなマッチは実現できません。

ただし、jQueryはSizzleにより実装されたCSSセレクタを使っているでしょうから、拡張APIを用いて、そのようなセレクタを独自に定義することはできるでしょう。