セレクターレベル 5

1. 序論

これは Selectors Level 4 に対する差分仕様です。

1.1. モジュール間の相互作用

このモジュールは、 [selectors-4] において CSS 向けに定義されたセレクターの集合を拡張します。

2. 位置疑似クラス

2.1. ローカルリンク疑似クラス :local-link

:local-link 疑似クラスは、サイト内におけるユーザーの現在位置に基づいてハイパーリンクをスタイル付けし、サイト内部リンクとサイト外部リンクを区別できるようにします。

（非関数形の）:local-link 疑似クラスは、対象の絶対 URL が要素自身の文書 URL と一致するハイパーリンクにおける、リンク元アンカーである要素を表します。文書 URL とリンク URL を照合する前に、フラグメント識別子は取り除かれます; それ以外の URL の部分はすべて考慮されます。

例えば、次の規則は、ナビゲーションリストの一部である場合に、現在のページを対象とするリンクへ下線が付かないようにします:

nav :local-link { text-decoration: none; }

関数形疑似クラスとして、:local-link() は単一の引数として非負整数も受け付けることができます。文書の URL が階層的スキームに属する場合、それは一致させるパス階層のレベル数を示します:

:local-link(0) は、ターゲットが文書 URL と同一オリジンにあるリンク要素を表します
:local-link(1) は、ターゲットが同一オリジンで、かつ最初のパスセグメントも同じであるリンク要素を表します
:local-link(2) は、ターゲットが同一オリジンで、かつ最初および 2 番目のパスセグメントも同じであるリンク要素を表します
など。

次の例は、サイト外部リンクすべてを破線の下線でスタイル付けします。

:not(:local-link(0)) { text-decoration-style: dashed; }

パスセグメントとは、URL のパスにおいてスラッシュ（/）で区切られた部分です。文書 URL にセグメントが欠けている場合、そのセグメントの一致を要求する疑似クラスは何にも一致しません。

したがって、次のリンクがあり:

<a href="http://www.example.com">Home</a>
<a href="http://www.example.com/2011">2011</a>
<a href="http://www.example.com/2011/03">March</a>
<a href="http://www.example.com/2011/03/">March</a>
<a href="http://www.example.com/2011/03/21">21 March</a>
<a href="https://www.example.com/2011/03/">March</a>
<a href="http://example.com/2011/03/">March</a>

そして次のスタイルがあるとします:

a:local-link {...}
a:local-link(0) {...}
a:local-link(1) {...}
a:local-link(2) {...}
a:local-link(3) {...}
a:local-link(4) {...}

文書 URL が http://www.example.com/2011/03/ の場合:

リンク 1 はスタイル B を受けます
リンク 2 はスタイル B と C を受けます
リンク 3 はスタイル B、C、D を受けます
リンク 4 もスタイル A、B、C、D、E を受けます
リンク 5 はスタイル B、C、D を受けます
リンク 6 はスタイルが適用されません
リンク 7 はスタイルが適用されません
スタイル F は何にも適用されません

URL の「オリジン」は RFC 6454 の第 4 節で定義されます。 :local-link(n) に対する照合において、 URL のユーザー名、パスワード、クエリ文字列、およびフラグメントの各部分は考慮されません。文書 URL が階層的スキームに属さない場合、関数形疑似クラスは何にも一致しません。

文書 URL が少なくとも N 個のセグメントを持つ場合、 :local-link(N) が少なくとも N 個のセグメントを持つリンク URL にのみ一致することは明確です。（これにより :local-link に一貫した意味論を割り当てられ、たとえば :local-link(2) が GitHub における「リポジトリ内」リンクを意味する、といったことができます。）では、文書 URL が N 未満のセグメントしか持たず、リンクが同一ページである場合はどうでしょうか？「null セグメント」は一致として数えるべきでしょうか、それとも数えないべきでしょうか？

3. ユーザー操作疑似クラス

3.1. 関心疑似クラス: :interest-source および :interest-target

一般的な UI 機能として、ユーザーが特定の要素に「関心を示す」ことができ（関心ソース）、 UI がその関心に反応して、別の要素に追加情報を表示する（関心ターゲット）ことがあります。典型的にはポップアップです。例えば、ページ上のユーザー名にホバーすると、そのユーザーの情報カードが表示されるかもしれません; またはリンクを長押しすると、リンク先のプレビューが表示されるかもしれません。こうしたことが起きるとき、最初の要素は

注: どの要素が正確に関心ソースになり得るのか、それらがどのように関心ターゲットと結び付けられるのか、そして「関心」がどのように示されるのかはすべて、ホスト言語によって定義されます。例えば HTML では、これは interestfor 属性によって行われ、「関心を示す」ことができる要素（関心ソース）を示します。そしてその属性は、追加情報を表示する意図を持つ別の要素（関連付けられた関心ターゲット）を指します（通常は popover 要素です）。

:interest-source 疑似クラスは、ユーザーが現在「関心を示している」関心ソース要素に適用され、 :interest-target 疑似クラスは、 :interest-source に一致する要素に関連付けられた関心ターゲットに適用されます。

注: :interest-source は、ユーザーが現在関心を示している関心ソースにのみ一致し、関心が 潜在的に 示され得る要素すべてに一致するわけではありません。例えば HTML では、単に interestfor 属性を持つだけでは、この疑似クラスに一致しません; ユーザーが実際にそれへ関心を示す必要もあります。同様に、:interest-target も、ユーザーが現在関心を示している要素と結び付けられた関心ターゲットにのみ一致し、 interestfor 属性が指し示す任意の要素に一致するわけではありません。

4. 入力疑似クラス

4.1. 入力値の検証

4.1.1. 空値疑似クラス: :blank

:blank 疑似クラスは、入力値が空である（空文字列、またはそれ以外の null 入力から成る）ユーザー入力要素に適用されます。

大まかに言えば、人間がフォームの印刷物を見て空欄だと言うであろうなら、 :blank に一致します。

フォームコントロールに対する :blank を解釈するための経験則は次のとおりです:

コントロールが常に送信され、かつ空文字列で送信される場合、:blank に一致します。（例えば、値が空のときの HTML の <input type=text> など。）
送信されることもあり、送信されないこともあり、送信されない状態に設定されている場合、:blank に一致します。（例えば、チェックされていないときの HTML の <input type=checkbox> など。）
それが「アクションボタン」（状態を表す「トグルボタン」ではなく）であり、<button>、<input type=submit> などの場合、 :blank に一致することはありません。

ホスト言語は、フォームコントロールがいつ :blank に一致するかについて、より正確な規則を指定できます。

5. 時間次元疑似クラス

これらの疑似クラスは、あるタイムラインにおける現在表示中またはアクティブな位置に対して、要素を分類します。例えば、文書の音声レンダリング中や、 WebVTT を用いて字幕を描画する動画表示中などです。

CSS はこのタイムラインを定義しません; ホスト言語が定義しなければなりません。要素に対してタイムラインが定義されていない場合、これらの疑似クラスはその要素に一致してはなりません。

注: :current 要素の祖先もまた :current ですが、 :past または :future 要素の祖先は、必ずしも :past または :future でもありません。ある要素が一致するのは、:current、:past、または :future のうち最大で 1 つです。

5.1. 現在要素疑似クラス: :current

:current 疑似クラスは、現在表示されている要素、またはその要素の祖先を表します。

その別形式である :current() は、引数として複合セレクターのリストを取ります: それは、引数に一致する :current 要素、またはそれが一致しない場合には、一致する :current 要素の最も内側の祖先を表します。（:current 要素もその祖先も引数に一致しない場合、セレクターは何も表しません。）

例えば、次の規則は、文書の音声レンダリングにおいて読み上げられている段落またはリスト項目をハイライトします:

:current(p, li, dt, dd) {
  background: yellow;
}

5.2. 過去要素疑似クラス: :past

:past 疑似クラスは、 :current 要素より前に完全に起きると定義されている任意の要素を表します。例えば、WebVTT 仕様は :past 疑似クラスを、メディア要素の現在の再生位置に対して相対的に定義します。文書言語が要素の時間に基づく順序を定義しない場合、これは :current 要素の（間接的であり得る）前の兄弟である任意の要素を表します。

5.3. 未来要素疑似クラス: :future

:future 疑似クラスは、 :current 要素より後に完全に起きると定義されている任意の要素を表します。例えば、WebVTT 仕様は :future 疑似クラスを、メディア要素の現在の再生位置に対して相対的に定義します。文書言語が要素の時間に基づく順序を定義しない場合、これは :current 要素の（間接的であり得る）次の兄弟である任意の要素を表します。

6. カスタム状態の公開: :state() 疑似クラス

:state( <ident> ) 疑似クラスは、カスタム要素のうち、その states set が、セレクター引数の値と同一である文字列を含むものに一致します。

Tests

parse-state.html (live test) (source)

注: 「同一である」による照合の挙動は、コードポイントごとに文字列を比較します; 特に、大文字小文字を区別します。したがって、states set に "foo" が含まれている場合、:state(FOO) は一致しません。

:state() 疑似クラスの正確な一致挙動は、ホスト言語によって定義されます。明確化のため、この疑似クラスを説明する概念は HTML の定義へリンクしています; 詳細については HTML 定義を参照してください。他のホスト言語は、この疑似クラスがどのように一致するかを定義しなければなりません。

7. 見出し構造: 見出し疑似クラス :heading および :heading()

（非関数形の）:heading 疑似クラスは、文書言語が定義する意味論（例えば [HTML5]）において、見出しレベルを持つ要素に一致します。

:heading の詳細度はクラスと同じです。

例えば、次のスタイルシートには、現在のページ内のすべての見出し要素に適用される規則が含まれています:

:heading { text-decoration: underline; }

関数形疑似クラスとして、:heading() 記法は、提供された integer 値のいずれかに一致する見出しレベルを持つ要素を表します。構文は次のとおりです:

:heading() = :heading( <level># )

ここで <level> は、型フラグが "integer" に設定された <number-token> です。

:heading() の詳細度はクラスと同じです。

次の例は、レベル 1 から 3 の見出しを font-weight 900 でスタイル付けし、レベル 6 以降の見出しを font-weight 500 でスタイル付けします。さらに、見出しレベル 1 と 2 には下線を付け、レベル 3 以降には text-decoration を付けません:

:heading(1, 2, 3) { font-weight: 900; }

:heading(6, 7, 8, 9) { font-weight: 500; }

:heading(1, 2) { text-decoration: underline; }

:heading(3, 4, 5, 6, 7, 8, 9) { text-decoration: none; }

注: 見出しレベルは、要素の型セレクターと異なる可能性があります。したがって、セレクター h1:heading(3) は、公開された見出しレベルが 3 である任意の h1 タグに一致します。

Tests

8. グリッド構造セレクター

2 次元グリッドにおけるセルの二重の関連付け（行と列への関連付け）は、階層的マークアップ言語における親子関係では表現できません。これらの関連付けのうち、階層的に表現できるのは一方のみです: もう一方は、文書言語の意味論の中で明示的または暗黙的に定義されなければなりません。最も一般的な階層的マークアップ言語である HTML と DocBook のいずれでも、マークアップは行優先（すなわち、行の関連が階層的に表現される）であり、列は暗黙になります。このような暗黙の列ベースの関係を表現できるようにするため、列結合子と、 :nth-col() および :nth-last-col() 疑似クラスが定義されます。列優先形式では、これらの疑似クラスは代わりに行の関連付けに対して照合します。

8.1. 列結合子（`||`）

列結合子は、 2 本のパイプから成り（||）、列要素が表す列に属するセル要素との関係を表します。列への所属は、文書言語の意味論のみに基づいて決定されます: 要素が提示されるかどうか、またどのように提示されるかは考慮されません。セル要素が複数の列に属する場合、それはそれらの列のいずれかへの所属を示すセレクターによって表されます。

次の例はセル C、E、G を灰色にします。

col.selected || td {
  background: gray;
  color: white;
  font-weight: bold;
}

<table>
  <col span="2">
  <col class="selected">
  <tr><td>A <td>B <td>C
  <tr><td colspan="2">D <td>E
  <tr><td>F <td colspan="2">G
</table>

8.2. :nth-col() 疑似クラス

:nth-col(An+B) 疑似クラス記法は、 n の任意の正整数またはゼロ値に対して、その列の前に An+B-1 列がある列に属するセル要素を表します。列への所属は、文書言語の意味論のみに基づいて決定されます: 要素が提示されるかどうか、またどのように提示されるかは考慮されません。セル要素が複数の列に属する場合、それはそれらの列のいずれかを示すセレクターによって表されます。

CSS Syntax Module [CSS3SYN] は、An+B 記法を定義します。

8.3. :nth-last-col() 疑似クラス

:nth-last-col(An+B) 疑似クラス記法は、 n の任意の正整数またはゼロ値に対して、その列の後に An+B-1 列がある列に属するセル要素を表します。列への所属は、文書言語の意味論のみに基づいて決定されます: 要素が提示されるかどうか、またどのように提示されるかは考慮されません。セル要素が複数の列に属する場合、それはそれらの列のいずれかを示すセレクターによって表されます。

CSS Syntax Module [CSS3SYN] は、An+B 記法を定義します。

9. 結合子

9.1. 参照結合子 `/ref/`

参照結合子は、間に CSS 修飾名を挟んだ 2 本のスラッシュから成り、 2 つの複合セレクター（例: A /attr/ B）を分離します。第 1 の複合セレクターが表す要素は、第 2 の複合セレクターが表す要素を明示的に参照します。ホスト言語がこの関係を表現する別の構文を定義しない限り、この関係は、第 1 の要素上で指定された属性の値が IDREF であるか、第 2 の要素を参照する ID セレクターである場合に存在すると見なされます。

参照結合子における属性照合は、属性セレクターと同じ規則に従います。

次の例は、 input 要素を、その <label> がフォーカスされているかホバーされているときにハイライトします:

label:is(:hover, :focus) /for/ input,       /* "for" 属性による関連付け */
label:is(:hover, :focus):not([for]) input { /* 包含による関連付け */
  box-shadow: yellow 0 0 10px;
}

10. 変更点

10.1. レベル 4 以降の変更点

レベル 4 以降の追加点:

参照結合子（Selectors 4 の以前の草案から延期）
:local-link 疑似クラスの関数形（Selectors 4 の以前の草案から延期）
:state() 疑似クラス
:heading および :heading() 疑似クラス
:local-link 疑似クラス（Selectors 4 の以前の草案から延期）
:interest-source および :interest-target 疑似クラス
:blank 疑似クラス（Selectors 4 の以前の草案から延期）
グリッド構造（列）セレクター（Selectors 4 の以前の草案から延期）
時間次元疑似クラス（Selectors 4 の以前の草案から延期）

11. 謝辞

CSS working group は、長年にわたって以前の Selectors 仕様に貢献してくださった皆様に感謝します。それらの仕様が本仕様の基礎となったためです。特に working group は、Selectors Level 5 への具体的な貢献として、次の方へ特別な感謝を申し上げます: Joey Arhar。

プライバシーに関する考慮事項

適切な場合、レベル 4 からコピーされるべきです。

セキュリティに関する考慮事項

適切な場合、レベル 4 からコピーされるべきです。

適合性

文書の表記規約

適合要件は、記述的な断定と RFC 2119 の用語の組み合わせによって表現されます。規定部分におけるキーワード “MUST”、 “MUST NOT”、“REQUIRED”、“SHALL”、“SHALL NOT”、“SHOULD”、“SHOULD NOT”、 “RECOMMENDED”、“MAY”、および “OPTIONAL” は、RFC 2119 に記述されているとおりに解釈されます。ただし、可読性のため、本仕様ではこれらの語をすべて大文字で表記していません。

本仕様の本文は、明示的に非規定であると示された節、例、および注記を除き、すべて規定です。 [RFC2119]

本仕様における例は、“for example” という語で導入されるか、規定の本文から class="example" によって次のように区別されます:

参考（非規定）注記は “Note” という語で始まり、規定の本文から class="note" によって次のように区別されます:

注意喚起（advisement）は、特別な注意を喚起するようにスタイル付けされた規定の節であり、 <strong class="advisement"> によって他の規定テキストから次のように区別されます: UAs は、アクセス可能な代替手段を提供しなければなりません。

適合クラス

本仕様への適合は、次の 3 つの適合クラスについて定義されます:

スタイルシートが本仕様に適合するのは、本モジュールで定義される構文を使用するその宣言がすべて、一般的な CSS 文法および本モジュールで定義される各機能の個別文法に従って有効である場合です。

レンダラーが本仕様に適合するのは、適切な仕様によって定義されるとおりにスタイルシートを解釈することに加え、本仕様で定義されるすべての機能を、正しく解析し、それに従って文書をレンダリングすることによりサポートする場合です。ただし、デバイスの制限によって UA が文書を正しくレンダリングできないことは、 UA を不適合とするものではありません。（例えば、UA はモノクロモニター上で色をレンダリングすることを要求されません。）

オーサリングツールが本仕様に適合するのは、一般的な CSS 文法および本モジュールの各機能の個別文法に従って構文的に正しいスタイルシートを書き、かつ、本モジュールで記述されるスタイルシートに関する他のすべての適合要件を満たす場合です。

部分的な実装

著者が前方互換の解析規則を利用してフォールバック値を割り当てられるようにするため、 CSS レンダラーは、利用可能なレベルのサポートを持たないあらゆる at-rule、プロパティ、プロパティ値、キーワード、およびその他の構文的構成物を無効として扱わなければならず（そして適切に無視しなければなりません）。特にユーザーエージェントは、単一の複数値プロパティ宣言の中で、未サポートのコンポーネント値だけを選択的に無視し、サポートされる値を尊重してはなりません: いずれかの値が無効と見なされる場合（未サポート値はそうでなければなりません）、 CSS は宣言全体を無視することを要求します。

不安定および独自機能の実装

非実験的な実装

仕様が Candidate Recommendation 段階に達すると、非実験的な実装が可能になり、実装者は、仕様に従って正しく実装されていることを示せるあらゆる CR レベルの機能について、プレフィックスなしの実装をリリースするべきです。

実装間での CSS の相互運用性を確立し維持するため、 CSS Working Group は、非実験的な CSS レンダラーが、あらゆる CSS 機能についてプレフィックスなしの実装をリリースする前に、実装報告書（必要なら、その実装報告書で使用されたテストケース）を W3C に提出することを要請します。 W3C に提出されたテストケースは、 CSS Working Group によるレビューと修正の対象となります。

テストケースおよび実装報告書の提出に関する追加情報は、 CSS Working Group のウェブサイト https://www.w3.org/Style/CSS/Test/ にて参照できます。質問は、メーリングリスト public-css-testsuite@w3.org 宛に送るべきです。

セレクター レベル 5

概要

この文書のステータス