:target

:target 擬似クラス

[2] :target 擬似クラス素片識別子によって指定されている対象要素 (target element) に適用されます >>1

仕様書

意味

[3] 文書URL素片識別子により特定の要素を指している時 (その URL でページを開いた時や、ページ内のリンクの移動でそうなったとき)、当該要素には :target 擬似クラスが適用されます。 この要素対象要素群 (target elements) といいます >>1

[17] 文書は、対象要素 (target element) を持ちます >>9。 初期値は null です >>9文書対象要素群は、当該文書対象要素null でなければ対象要素を含むリストnull なら空のリストです。 >>16

[4] 素片識別子がどの要素も指していない時、 :target はどの要素にも一致しません。
[6] 素片識別子がない場合、 :target はどの要素にも一致しません。 >>1

[10] 文書対象要素は、素片識別子へのスクロール時に、 その時点の文書の示された部分要素に変更されます。

[13] これは navigate の最後の方の手順で決定されます。 文書レンダリングが開始されて構文解析が完了していない途中では、 まだ設定されていないことがあります。

[14] script 要素によって実行されるスクリプトから document.querySelector (':target') しても、素片識別子で指定された要素を取得できないことがあります。

[5] 文書の示された部分は任意の DOM 操作で変化する可能性がありますが、 :target が変化するのは navigate のタイミングのみとなります。

歴史

選択子

[8] 選択子3の最初の公開案の >>7 には既に :target が含まれていました。

HTML

[11] 選択子の仕様は対象要素素片識別子によって識別される要素であるとしか説明していませんでしたが、 HTML 仕様書はより明確にその決定方法を規定しています。 HTML の仕様書とはいえ、 Webブラウザーの挙動について text/html に限らず適用される規定であり、事実上選択子仕様の曖昧な部分を明確化する形となっています。

[12] Chrome では pushState素片識別子が変わっても、 :target の状態は変化しないようです。

[15] Make :target definition sticky based on last scroll-to-fragment ( (domenic著, )) <https://github.com/whatwg/html/commit/1488bb6f765e41558bb221dc247012a35d88527b>