CSS3

疑似クラス

:target

  編集:2022.07.09 by T.A.

[Edge]○。→mdn

ターゲットとなった。

E:target
E 該当させる要素。

文書言語によっては、文書の URL は、文書自身のみならず、URL の素片を介して文書の中の特定の要素を指す。この仕方で指される要素は、文書のターゲット要素とされる。

HTML における素片は、ページ内で同じ ID を有する要素を指す。例えば URL "https://example.com/index.html#section2" は、"https://example.com/index.html" に在る文書内の[id が "section2" にされている要素]を指す。

:target 疑似クラスは、文書のターゲット要素に合致する。文書の URL が素片識別子を伴わない場合、その文書にターゲット要素はない。

p.note:target

この選択子は、参照元 URL からターゲット要素にされていて、"note" クラスに属するような、p 要素を表現する

次のものは、:target 疑似クラスを利用して、ターゲット要素の色を red にするとともに、その先頭に画像を配置する:
:target { color : red }
:target::before { content : url(target.png) }

以下のCSSが組み込んであります:

<A href="#ATest">リンク</A><BR>
<A class=Test id=ATest>アンカー</A>
※背景色が変わるのは当文書の仕組みです


テスト
別画面に表示させて。
HTML:

ここに表示
¶[Edge]○リンク動作すると有効となった
HTML:

ここに表示
スクリプト:


スクリプト:



表示内容:
表示内容: