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

今回から擬似クラスについて、1つずつ見ていきましょう。
擬似クラスは、基本的なセレクター（エレメンタルセレクターや属性セレクター）の後にくっつけて、その要素の「ある状態」をセレクトすることができるモノ。

いっぱいある擬似クラスの中で、まずはロケーション擬似クラスを見てみよう。
これは、リンクの状態（今いる位置、リンク履歴など）によって要素をセレクトします。
ですので href 属性を持つ <a>要素 や <area>要素に使います。

今回はロケーション擬似クラスの、:link　:visited　:any-link　の3つを使ってみます。

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

1. :link（まだ訪問していないリンク元）
2. :visited（訪問済みのリンク元）
   1. :visited で使えるプロパティは「色指定」のみに制限されてる！
3. :any-link（:link か :visited のいずれかに一致）

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

:link（まだ訪問していないリンク元）

:link は、未訪問のリンク元をセレクトする擬似クラスです。
「未訪問」とは、ウェブページを初めて開いたばっかりのときに、リンク元（<a>要素とか）を まだ1回もクリックとかタップとかしてなくて、リンク先に1度も飛んでない状態のこと。
（何度かリンク先に訪問してても、ブラウザでページを再読込みしたり、履歴をクリアすれば、未訪問な状態に戻ります）

:link でサンプルを作ってみました。

See the Pen 擬似クラス:link TEST by yuki★hata (@yuki__hata) on CodePen.

HTMLはコレ。
最後の <a>要素には href属性がありません。ということは、:link は href属性が無い（リンクしない）ものには反応しないのがわかりますね。

<a href="#point1">#point1へのリンク</a>
<a href="#point2">#point2へのリンク</a>
<a>href属性がない&lt;a&gt;要素</a>

CSSはこちら。link状態のテキストの装飾をいろいろ指定してみました。

a:link {
	display:block; /*ブロックレベル要素にしました*/
	margin:.5em 0;
	padding:.2em .4em;
	font-weight:bold;     /*文字を太くして*/
	color:#1e90ff;        /*文字色を指定*/
	background:#d1ffe8;   /*背景色を指定*/
	text-decoration:none; /*ブラウザデフォのアンダーバーを無くしました*/
    border:solid 2px #1e90ff; /*ボーダー（囲み罫）を付けました*/
	}

:visited（訪問済みのリンク元）

:visited は、すでに訪問したリンクのリンク元をセレクトします。

先程の :link のサンプルは、実は :visited にも全く同じスタイルを指定して、リンクをクリックしたあとも変化が無いようにしています。
今度は :visited に別のスタイルを指定しました。
サンプルのリンクをクリックしてみてください。
（もとに戻す（:linkのスタイルに戻す）には、サンプル右下の「Rerun」を押してください）

See the Pen 擬似クラス:visited TEST by yuki★hata (@yuki__hata) on CodePen.

CSSはこちらです。
:link から変えたいプロパティのみ :visited で指定します。
それ以外のスタイルは :link のものを継承してそのまま残ります。

a:link {
	display:block; /*ブロックレベル要素にしました*/
	margin:.5em 0;
	padding:.2em .4em;
	font-weight:bold;     /*文字を太くして*/
	color:#1e90ff;        /*文字色を指定*/
	background:#d1ffe8;   /*背景色を指定*/
	text-decoration:none; /*ブラウザデフォのアンダーバーを無くしました*/
    border:solid 2px #1e90ff; /*ボーダー（囲み罫）を付けました*/
	}
a:visited {
	color:#a0522d;   /*文字色を変更*/
	background:pink; /*背景色も変更*/
    border-color:#a0522d; /*ボーダーの色も変更*/
	}

:visited で使えるプロパティは「色指定」のみに制限されてる！

:visited は 使えるプロパティに制限があります。プライバシー保護が理由だそうです。

2010年より前までは、ブラウザは :visited によってユーザーの閲覧履歴を明らかにするようになっていたんだそうです。閲覧履歴がユーザー本人以外に漏れればプライバシーの侵害になります。
で、その問題を軽減するために、ブラウザは、ウェブアプリケーションから問い合されても、訪問済みであっても未訪問のリンクである値を返したりするようになり、それに伴って :visited で指定できるスタイルも制限されるようになったんだって。（参考：:visited | MDN）

:visited で使えるのは下記のみ。ぶっちゃけ色しか指定できないですw

• colorプロパティ（文字色）
• background-colorプロパティ（背景色）
• border-colorプロパティ（ボーダーの色、上下左右のショートカット）
• border-bottom-color, border-left-color, border-right-color, border-top-color
• column-rule-color（マルチカラムのカラム感の罫線の色）
• outline-color（アウトラインの色）
• text-decoration-color（テキストのライン装飾の色）
• text-emphasis-color（圏点の色）
• SVG の fill属性（SVGの図形やテキストの塗りつぶしの色）
• SVG の stroke属性（SVGの図形やテキストのアウトラインの色）

色指定ができると言っても、色の「透明度」を変えることは不可。
ですので rgba( ) や hsla( ) で「透明度」の指定をしても無視されます。
また、値の「transparent」（= 透明色 = rgba(0,0,0,0) ）も利用できません。

色以外の、例えば text-decoration: underline としても無視されるし、ボーダーの太さを変えるとか、背景に画像を置くとかも無効です。

訪問済みリンクに関しては、あくまでもユーザー本人が「どこを閲覧してて、どこをまだ見てないか」が把握できればいい。色の変化ぐらいで十分ということなんでしょうね。

:any-link（:link か :visited のいずれかに一致）

一番最初の :link のサンプルは、実は :visited にも全く同じスタイルを指定して、リンクをクリックしたあとも変化が無いようにしています。サンプルとしてわかりやすくするために。で、CSSはこのように↓していました。

a:link, a:visited {
	display:block;
	margin:.5em 0;
    /*省略*/
	}

↑　a:link と a:visited を「,（カンマ）」で区切って並べて「セレクターリスト」にまとめて、同じ指定を両方にしています。

こんなふうに、訪問済みなリンクでもスタイルを変えたくない場合ってありますよね。
例えば <nav>要素内のナビゲーション。
ナビゲーションは、ブラウザのデフォルトスタイルで訪問後に見た目が勝手に変わるのは望ましくない場合が多い。
そのために :visited は指定しなきゃなんだけど、結局 :link と同じでいいので上記のようにセレクターリストにして指定したりしてた。

そこで登場したのが :any-link です。（Selectors Level 4 から登場）
これは、要素が「:link な状態」か「:visited な状態」かどっちかだったらセレクトするって擬似クラスです。要はリンク元だったらOKみたいな。

というわけで、CSSで セレクターを :any-link で指定してみます。

a:any-link {
	display:block;
	margin:.5em 0;
	padding:.2em .4em;
	font-weight:bold;
	color:#db7093;
	background:#ffffe0;
	text-decoration:none;
	border:solid 2px #db7093;
	}

プレビューです。リンクを押しても変化ありませんね。
新しめの擬似クラスですが意外と多くのブラウザが実装しているようです。

See the Pen 擬似クラス:any-link TEST by yuki★hata (@yuki__hata) on CodePen.

次回予告

こんな感じでどんどん疑似クラスを1つずつ使っていきます。
次回もロケーション擬似クラスの続きで、:target 、 :target-within、 :local-link を使ってみます。

関連記事

• 【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 (交差軸方向)
• 【64-9】アイテムの個別配置を一度に指定する justify-items (主軸方向)