ほんっとにはじめての HTML5 と CSS3

ロケーション擬似クラスの続きです。
今回は、:target　:target-within　:local-link　を使ってみます。

擬似クラスって何？というかたは、こちらをご覧ください。
【66】擬似クラスと疑似要素（2つの違いとそれぞれの特徴）
擬似クラスも含めた セレクター一覧いちらんはこちらです。
【65】CSSのセレクターを整理しよう（セレクター 一覧）

1. :target（リンク先の要素をセレクト）
2. :target-within（リンク先の要素の親を対象に）
3. :local-link（現ページをターゲットにしているリンク元）

参考：
・Selectors Level 4 | W3C Working Draft
・CSS セレクター | MDN
・擬似クラス | MDN

:target（リンク先の要素をセレクト）

:target は、その名のとおりターゲットになっている要素をセレクトする擬似クラス。

「ターゲットになっている要素」とは、
id名が付いてて、同じページか 他のページからの「リンク先」になっている要素が、ユーザーによって「リンク元をクリック（タップ）されてリンクしたあとの状態」のこと。
普段はセレクターにならず、リンクされたあとの状態だけセレクターになります。

ふつうブラウザは、ページ内のある箇所にジャンプした時は、その箇所を画面の一番上に持ってきますが、画面の高さよりもウェブページの内容が少ない場合は、そんなふうに動かない。それだとユーザーは「どこにリンクしたのかわからない」
そんなときに「ここにリンクしたよ」と、リンク先のスタイルを変えて目立たせたい時に使うのが :target 擬似クラスです。

:target でサンプルを作ってみました。
画像クリックで、別ページでサンプルが開きます。

この「ほんっとに...」で使っている JavaScript の都合で、このページ内で :target がうまく動作しないので、別ページにしました。

ページ内リンクのリンク元をクリックすると、そのときターゲットになった <h3>要素の背景色などを変化させています。

HTMLはこちら。

<ol>
 <li><a href="#demo1">#demo1へのリンク元</a></li>
 <li><a href="#demo2">#demo2へのリンク元</a></li>
 <li><a href="#">このサンプルページへのリンク</a></li>
</ol>
<article>
  <h3 id="demo1">これは <span>id="demo1"</span> な h3要素</h3>
  <p>これは p要素。p要素と h3要素は article要素の中に入っています。</p>
</article>
<article>
  <h3 id="demo2">これは <span>id="demo2"</span> な h3要素</h3>
  <p>これは p要素。p要素と h3要素は article要素の中に入っています。</p>
</article>

CSSはこちら。

h3:target { /*「h3要素がターゲットになった時」という意味*/
	background-color: #e8ffd1;  /*背景色を付けています*/
    }
h3:target::before, .sample1 h3:target::after {　/*まだやってないけど疑似要素を使っています*/
	content: "★";  /*前後に「★」をつけます。これはテキストです*/
	color: sienna;  /*「★」の色です*/
	margin: 0 .3em; /* h3要素のテキストくっつかないように左右にマージンを付けています*/
    }
h3:target span {
	color: sienna; /* h3要素の中の一部のテキストの文字色を変えています*/
    }

:target-within（リンク先の要素の親を対象に）

:target-within は、ターゲットになっている要素を子孫として持っている「親要素」をセレクトする擬似クラス。
ですがこれ、今のところ実装しているブラウザはあんまり無いみたい（2023年9月記）

プレビュー見れないんであまり意味はないんですが、一応サンプルは作ってみました。
下の画像は Photoshopで作ったもの。こんなふうに親要素ごとスタイルを変えられるとリンク先が目立ってイイんですけどね。
画像クリックでサンプルが開きますが、操作してもこんなふう↓にはなりません。あしからず。

HTMLは、先程のサンプルとほぼ同じです。
ターゲットになる <h3>要素は、兄弟要素の<p>とともに <article>要素の中に入っています。この親要素の <article>要素に、下記のCSSを指定すればスタイルが変えられるというものです。

article:target-within {
	background-color: #ffffd6;  /*articleの背景に淡い黄色を指定しました*/
    }

:target-within は、Selectors Level 4 に載っていて、まだ Working Draft（作業草案）なのですが、はやくブラウザが実装するといいですね。

:local-link（現ページをターゲットにしているリンク元）

:local-link も、今のところ実装しているブラウザはあんまり無いみたい（2023年9月記）ですが、W3Cの仕様書のサンプルコードを見て、なるほどなあと思ったので載せときます。

これは、「リンク元」の方をセレクトします。
:any-link に合致する要素（:link か :visited な要素）のうち、リンク先URLが今のURLと同じものをセレクトする擬似クラスです。

W3Cの仕様書 Selectors Level 4 にあるサンプルコードはこれ。

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

これは <nav>要素のなかのすべてのリンク元要素が、同じページをリンク先にしている時、アンダーラインなどのデコレーションを無しにする、という指定です。

グローバルナビゲーションとかで、「今見ているこのページ」がリンク先になっている場合だけ、スタイルを変えたいときってありますよね。
そんなとき、WordPress などでは動的にそのリンク元要素をセレクトして、スタイル指定できますが、それがCSSでできる、ということを目指しているようです。
これもブラウザが実装するといいですね。

次回予告

今回でロケーション擬似クラスは一応終わりです。

次回からユーザーアクション擬似クラスを見ていこう。
これは、クリックやテキスト入力など、ユーザーが操作している状態をセレクトする疑似クラスです。
次回はまずは、次回から:active　:hover を使ってみます。

関連記事

• 【66-2】ユーザーアクション擬似クラス　:active　:hover
• 【66-1】ロケーション擬似クラス　:target　:target-within　:local-link
• 【66-1】ロケーション擬似クラス　:link　:visited　:any-link
• 【66】擬似クラスと疑似要素（2つの違いとそれぞれの特徴）
• （ちょっとメモ）名前空間（ネームスペース）とCSSセレクター
• 【65-3】クラスセレクター（.）と IDセレクター（#）
• 【65-3】属性セレクター　[att="val" i] [att="val" s]
• 【65-3】属性セレクター　[att^="val"] [att$="val"] [att*="val"]
• 【65-3】属性セレクター　[att] [att="val"] [att~="val"] [att|="en"]
• 【65-2】結合子を使うセレクター（E F,　E > F,　E + F,　E ~ F）
• （ちょっとメモ）「,」で区切る「セレクターリスト」
• 【65-1】エレメンタルセレクター（要素名で指定するセレクター）
• 【65】CSSのセレクターを整理しよう（セレクター 一覧）
• 【64-11】アイテム配置を一括指定する place-itemsショートハンド
• 【64-10】アイテムの個別配置を一度に指定する align-items (交差軸方向)