5月 2日付けですが、Selectors Level 4 の Working Draft （草案） が更新されました。
Selectors Level 4 自体は 2011年 9月 29日の Selectors Level 3 仕様の勧告とあわせて最初の Working Draft が公開されていますが、そこから今回で 2回目の更新となります。
Working Draft 内の、「Selectors Overview」 に Selectors Level 4 を含めた、セレクタの一覧がありますので、下記に引用しつつ簡単に日本語での解説も付け加えておきましたが、Selectors Level 4 ではセレクタがより一層便利になっていますので、早いところブラウザ側で実装されるといいですね。
ちなみに、セレクタというと、今までは CSS のためのものっていう印象が強いと思いますが、Selectors API で使われたりと、CSS 以外でのセレクタの利用も出てきているため、「CSS4 Selectors」 じゃなくて 「Selectors Level 4」 って名前になってるんですね。とはいっても、CSS で利用するケースが圧倒的に多いのは間違いないですが。
Selectors Overview
| Pattern | Represents | Section | Level |
|---|---|---|---|
* |
すべての要素。ユニバーサルセレクタ | Universal selector | 2 |
E |
E という要素。タイプセレクタ | Type (tag name) selector | 1 |
E:not(s1, s2) |
s1 または s2 でない、E という要素 （Selectors Level 4 ではカンマ区切りで複数の要素を指定可能に） | Negation pseudo-class | 3/4 |
E:matches(s1, s2) |
s1, s2 いずれかにマッチする E という要素 （カンマ区切りで複数の要素を指定） | Matches-any pseudo-class | 4 |
E.warning |
クラスセレクタ | Class selectors | 1 |
E#myid |
ID セレクタ | ID selectors | 1 |
E[foo] |
foo という属性をもつ E という要素 | Attribute selectors | 2 |
E[foo="bar"] |
bar という属性値の foo という属性をもつ E という要素 | Attribute selectors | 2 |
E[foo="bar" i] |
foo という属性に、大文字小文字を区別せず （ASCII の範囲内） bar という属性値をもつ E という要素 | Attribute selectors: Case-sensitivity | 4 |
E[foo~="bar"] |
bar という属性値を含む foo という属性をもつ E という要素 | Attribute selectors | 2 |
E[foo^="bar"] |
foo という属性と、"bar" という文字列で始まる属性値をもつ E という要素 | Attribute selectors | 3 |
E[foo$="bar"] |
foo という属性と、"bar" という文字列で終わる属性値をもつ E という要素 | Attribute selectors | 3 |
E[foo*="bar"] |
foo という属性と、"bar" という文字列を含む属性値をもつ E という要素 | Attribute selectors | 3 |
E[foo|="en"] |
ハイフンで区切られた en で始まる属性値を持つ、foo という属性をもつ E という要素 | Attribute selectors | 2 |
E:dir(ltr) |
書字方向に応じて 要素 E にマッチ | The :dir() pseudo-class | 4 |
E:lang(zh, *-hant) |
言語擬似クラス。Selectors Level 4 で *-CH のように記述して、後方一致が可能に。 | The :lang() pseudo-class | 2/4 |
E:any-link |
ハイパーリンクのソースアンカーとして機能する要素 E （要するにリンクとして機能している a 要素） | The hyperlink pseudo-class | 4 |
E:link |
まだ訪れていないリンク | The link history pseudo-classes | 1 |
E:visited |
訪問済みのリンク | The link history pseudo-classes | 1 |
E:local-link |
現在見ているドキュメントとの位置関係に応じてリンクにマッチ | The local link pseudo-class | 4 |
E:local-link(0) |
現在地と同一ドメインに対するリンクにマッチ。(0) の部分に 1 以上の整数を入れると、リンク先の階層に応じてマッチ | The local link pseudo-class | 4 |
E:target |
リンクのターゲットになる要素 E | The target pseudo-class | 3 |
E:scope |
参照された要素 E を基点にマッチ （参考エントリー） | The scope pseudo-class | 4 |
E:current |
時間軸上の現在選択されている要素 E | Time-dimensional Pseudo-classes | 4 |
E:current(s) |
時間軸上の現在選択されている s にマッチする要素 E （カンマ区切りで複数の要素を指定） | Time-dimensional Pseudo-classes | 4 |
E:past |
時間軸上で過去の要素 E | Time-dimensional Pseudo-classes | 4 |
E:future |
時間軸上で未来の要素 E | Time-dimensional Pseudo-classes | 4 |
E:active |
アクティブな要素 E | The user action pseudo-classes | 1 |
E:hover |
マウスカーソルが上に乗っている状態の要素 E | The user action pseudo-classes | 2 |
E:focus |
フォーカスされている要素 E | The user action pseudo-classes | 2 |
E:enabled |
有効、または無効になっている入力コントロール | The :enabled and :disabled pseudo-classes |
3 |
E:checked |
チェックされている入力コントロール （ラジオボタン、またはチェックボックス） | The selected-option pseudo-class | 3 |
E:indeterminate |
未確定な状態の入力コントロール。例えばチェックも、チェックを外す行為もされていないチェックボックスなど | The indeterminate-value pseudo-class | 4 |
E:default |
初期状態の入力コントロール | The default option pseudo-class :default |
3-UI/4 |
E:in-rangeE:out-of-range |
範囲内、または範囲外の値をもつ入力コントロール | The validity pseudo-classes | 3-UI/4 |
E:requiredE:optional |
必須、または任意入力の入力コントロール | The optionality pseudo-classes | 3-UI/4 |
E:read-onlyE:read-write |
読み込み専用、または書き込み可能な入力コントロール | The mutability pseudo-classes | 3-UI/4 |
E:root |
ルートとなる要素 E | Structural pseudo-classes | 3 |
E:empty |
内容をもたない要素 E | Structural pseudo-classes | 3 |
E:first-child |
最初の子要素となる要素 E | Structural pseudo-classes | 2 |
E:nth-child(n) |
n 番目の子要素となる要素 E | Structural pseudo-classes | 3 |
E:last-child |
最後の子要素となる要素 E | Structural pseudo-classes | 3 |
E:nth-last-child(n) |
最後から数えて n 番目の子要素となる要素 E | Structural pseudo-classes | 3 |
E:only-child |
唯一の子要素となる要素 E | Structural pseudo-classes | 3 |
E:first-of-type |
親要素内で同列 （兄弟関係） の E と同じ名前を持つ要素で最初に出現する要素 | Structural pseudo-classes | 3 |
E:nth-of-type(n) |
親要素内で同列 （兄弟関係） の E と同じ名前を持つ要素で n 番目に出現する要素 | Structural pseudo-classes | 3 |
E:last-of-type |
親要素内で同列 （兄弟関係） の E と同じ名前を持つ要素で最後に出現する要素 | Structural pseudo-classes | 3 |
E:nth-last-of-type(n) |
親要素内で同列 （兄弟関係） の E と同じ名前を持つ要素で最後から数えて n 番目に出現する要素 | Structural pseudo-classes | 3 |
E:only-of-type |
E という要素のうち、その親要素内で唯一の E 要素 | Structural pseudo-classes | 3 |
E:nth-match(n of selector) |
n 番目のセレクタにマッチ | Structural pseudo-classes | 4 |
E:nth-last-match(n of selector) |
最後から数えて n 番目のセレクタにマッチ | Structural pseudo-classes | 4 |
F || E |
F に属する列の 要素 E にマッチ | Grid-Structural pseudo-classes | 4 |
E:nth-column(n) |
n 番目の列にマッチ | Grid-Structural pseudo-classes | 4 |
E:nth-last-column(n) |
最後から数えて n 番目の列にマッチ | Grid-Structural pseudo-classes | 4 |
E F |
子孫セレクタ | Descendant combinator | 1 |
E > F |
子セレクタ。直接の子要素 | Child combinator | 2 |
E + F |
隣接セレクタ。直接の弟要素 | Next-sibling combinator | 2 |
E ~ F |
間接セレクタ | Following-sibling combinator | 3 |
E /foo/ F |
要素 E の属性 foo と同じ値の ID 属性値を持つ要素 F にマッチ | Reference combinator | 4 |
E! > F |
F 要素の親である要素 E （! が付いた要素を対象にセレクタを解釈） | Determining the subject of a selector + Child combinator | 4 |
※ F || E は、今回の WD 内、Selectors Overview では、E:column(selector) になってるんですけど、そのセクションの説明文は、Editor's Draft 同様、F || E になってますので、これにあわせました。
E:matches(s1, s2)E:nth-match(n of selector)F || EE:nth-column(n)E /foo/ FE! > F
あたりは、使えるようになるとかなり便利になるセレクタですので、後日、別立てで記事書きます。
あと、別件ですが同日、vCard の 最初の草案 （First Public Working Draft） も公開されましたね。
