13007

[code]

    <div id="foo">...<div>
    <div id="foo-bar">...<div>
    <div id="foo-1">...<div>
    <div id="foo-2">...<div>
    
[/code]

上記のようなHTMLに対して、`id`属性が`foo-{数値}`な要素のみにマッチするセレクタはあるでしょうか？

今のところは`[id^=foo]`で取得した全要素に対して追加でフィルタをかけて動かしていますが、できればCSSセレクタのみで完結させたいです。

[code]

    $("[id^=foo]").each(function() {
        if (!this.id.match(/^foo-\d+/)) return;
        ...
    });
    
[/code]


CC BY-SA 3.0
2015-08-03T19:16:37.323
13003
2019-12-13T13:58:46.007
2391
question
css
数値を含む値にマッチするセレクタ


ありません。

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

> Attribute values must be CSS
> [identifiers](http://www.w3.org/TR/CSS21/syndata.html#value-def-identifier)
> or [strings](http://www.w3.org/TR/CSS21/syndata.html#strings).

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

ただし、jQueryはSizzleにより実装されたCSSセレクタを使っているでしょうから、[拡張APIを用いて](https://github.com/jquery/sizzle/wiki#extension-
api)、そのようなセレクタを独自に定義することはできるでしょう。

* * *

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

[code]

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

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

[code]

    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 />"));
    });
[/code]

[code]

    <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>
[/code]


CC BY-SA 4.0
2015-08-03T23:52:51.587
13007
2019-12-13T13:58:46.007
2019-12-13T13:58:46.007
32986
208
13003
answer


与えられた条件は「idがfoo-（0〜9）で始まるdiv」なので、  
cssだけで条件をクリアするなら、以下のselectorで可能です。  
10個くらいなら条件を列挙してもいいかと思います。

[code]

    div[id^="foo-0"],
    div[id^="foo-1"],
    div[id^="foo-2"],
    div[id^="foo-3"],
    div[id^="foo-4"],
    div[id^="foo-5"],
    div[id^="foo-6"],
    div[id^="foo-7"],
    div[id^="foo-8"],
    div[id^="foo-9"] {
      color: red;
    }
[/code]

[code]

    <div id="foo">#foo</div>
    <div id="foo-bar">#foo-bar</div>
    <div id="foo-1">#foo-1</div>
    <div id="foo-2">#foo-2</div>
    <div id="foo-254">#foo-254</div>
[/code]


CC BY-SA 3.0
2015-10-12T12:18:39.793
17559
2015-10-12T12:18:39.793
12727
13003
answer