【CSS Modules】::target-text疑似要素の使い方

::target-textオブジェクトは、URLのフラグメント識別子によって参照されるターゲット要素内のテキストコンテンツを表すオブジェクトです。この擬似要素は、ウェブページのURLに指定されたフラグメント識別子（#記号の後の部分）に対応するIDを持つHTML要素（ターゲット要素）が存在する場合に、そのターゲット要素内部のテキストコンテンツのみを選択し、スタイルを適用するためのものです。

例えば、URLが https://example.com/document.html#section-heading のように指定され、HTMLドキュメント内に <h2 id="section-heading">セクションの見出し</h2> という要素がある場合、::target-textセレクタは「セクションの見出し」というテキスト部分にのみ作用し、ここに特定のCSSスタイルを適用できます。

この機能の主な目的は、ユーザーがURLで直接指定したコンテンツを視覚的に強調し、ページ内で注目すべき箇所を分かりやすく示すことで、アクセシビリティとユーザー体験を向上させることにあります。例えば、特定のテキストをハイライト表示したり、色を変えたりすることで、ユーザーが迅速に目的の情報を見つけられるようになります。

::target-textは、ターゲット要素のテキストコンテンツにのみ適用されるため、背景色やボックスモデルに関わるプロパティなど、テキスト以外のスタイルには直接影響しません。また、この擬似要素は比較的新しいCSSの機能であるため、すべての主要なブラウザで完全にサポートされているわけではありません。利用する際には、対象とする環境でのブラウザの互換性情報を確認することが重要です。

Copy
1:target::target-text {
2  /* スタイルプロパティと値を記述します */
3  background-color: yellow;
4  color: black;
5}

引数なし

引数はありません

戻り値なし

戻り値はありません