CSS | リンクテキストの色やスタイルを変更する方法

2022-01-22CSS テキスト,CSS

CSSでリンクタグ内にあるリンクテキストの色やその他のスタイルを変更する方法について紹介しています。

リンクテキストの色やスタイルを変更する

リンクテキストの色やスタイルを変更するサンプルコードです。

aタグで利用される疑似要素をまとめています。

サンプルコードでは「color」プロパティのスタイルのみを指定していますが他のプロパティも指定可能です。

リンク先のURLが未訪問の場合

リンク先のURLが未訪問の場合には「:link」でスタイルを指定します。

/* not visited */
a:link {
	color: #4169e1;
}

リンク先のURLが訪問済みの場合

リンク先のURLが訪問済みの場合には「:visited」でスタイルを指定します。

/* visited */
a:visited {
	color: #4169e1;
}

リンク先のURLが未訪問・訪問済みに限らず統一する場合

リンク先のURLが未訪問・訪問済みに限らず統一する場合には「:any-link」でスタイルを指定します。

「:link」と「:visited」に同じスタイルを指定する必要がなくなります。

※IEでは未対応です。

/* not visited or visited */
a:any-link {
	color: #4169e1;
}

リンク先のURLが同じURLの場合

「:local-link」同じURLのリンク先、例えば「#」でのページ内リンクに対して利用します。

この疑似要素はCSS4で追加予定となっています。

/* local link */
a:local-link {
  color: #4169e1;
}