CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSの:visited疑似クラスとは？使い方とスタイル適用の制限をわかりやすく解説

疑似クラス（Pseudo class）とは、要素やCSSセレクターの状態の変化を表現するための仕組みです。その中でも:visited疑似クラスは、リンクがすでに訪問済みであることを示すために使われます。

この疑似クラスは、主にアンカータグ（<a>要素）によるリンクと組み合わせて使用されるのが一般的です。

基本構文

a:visited { color:green;}

それでは、:visited疑似クラスの実際の使い方を、いくつかのシナリオ別に見ていきましょう。

例1：文字色の変更

<html>
<head>
    <style>
        a:visited { color:green;}
    </style>
</head>
<body>
    <a href="https://www.tutorialspoint.com">Click here to learn</a>
</body>
</html>

説明

この例では、初めてリンクを表示したときは通常のリンクカラー（青色）で表示され、一度訪問した後は文字色が緑色に変化します。訪問済みかどうかがひと目でわかるようになるため、ユーザビリティの向上にも役立ちます。

例2：枠線（ボーダー）の追加

<html>
<head>
    <style>
        /* :visited状態でスタイルが反映されるよう、デフォルトスタイルを設定 */
        a { background-color: white; border:1px solid white;}
        a:visited {border:yellow;}
    </style>
</head>
<body>
    <a href="https://www.tutorialspoint.com">Click here to learn</a>
</body>
</html>

説明

この例では、リンクを一度訪問すると、1pxの黄色い枠線がリンクに追加されます。あらかじめ白色のボーダーをデフォルトとして設定しておくことで、:visited状態のスタイル変化が視覚的にわかりやすくなっています。

例3：背景色の変更

<html>
<head>
    <style>
        /* :visited状態でスタイルが反映されるよう、デフォルトスタイルを設定 */
        a { background-color: white; }
        a:visited { background-color: seagreen;}
    </style>
</head>
<body>
    <a href="https://www.tutorialspoint.com">Click here to learn</a>
</body>
</html>

説明

この例では、リンクを一度訪問すると、背景色がシーグリーン（seagreen）に変わります。文字色だけでなく背景色を使うことで、より目立つ訪問済み表示を実現できます。

:visited疑似クラスのスタイル適用の制限

プライバシー保護とセキュリティ上の理由から、:visited疑似クラスで指定できるCSSプロパティには厳しい制限があります。使用できるのは以下のプロパティのみです。

  • color
  • background-color
  • border-color
  • border-bottom-color
  • border-left-color
  • border-right-color
  • border-top-color
  • column-rule-color
  • outline-color

また、SVGに関しては fill および stroke のみが対象となります。これら以外のプロパティ（フォントサイズやパディングなど）を指定しても、ブラウザによって無視される点に注意が必要です。

ブラウザ対応状況

ChromeFirefoxEdgeIESafariOpera
11対応対応13.5

:visited疑似クラスは主要なブラウザすべてで古いバージョンからサポートされており、安心して利用できる機能です。

  1. CSSの標準リンクスタイルとは？リンク状態ごとのデフォルト色とカスタマイズ方法

    リンクは、目的に応じて自由にスタイルを設定できます。リンクは通常のテキストと視覚的に区別できるスタイルにすることが推奨されています。リンクの各状態におけるデフォルトのスタイルは、以下の表のとおりです。 リンク状態デフォルトの色 Active（アクティブ・クリック中）#EE0000 Focus（フォーカス時）#5E9ED6 または類似の青系のアウトライン（Windows・Macの場合）Linuxでは #F07746 のアウトライン（テキストの色は変わりません） Hover（ホバー時）#0000EE Link（未訪問リンク）#0000EE Visited（訪問済みリンク）#551A8B

  2. CSSの:focus-within疑似クラスの使い方をわかりやすく解説

    フォーカスを受け取った要素そのものだけでなく、その親要素にもスタイルを適用したい場合は、CSSの:focus-within疑似クラスを使用します。:focus-withinは、「要素自身、またはその子孫要素のいずれかがフォーカスを持っているとき」に一致する疑似クラスです。フォーム全体やカード型レイアウトなど、入力フィールドを含むコンテナの見た目を動的に変化させたい場面で特に便利です。以下に、CSSの:focus-within疑似クラスの具体的な使用例を示します。例1：フォームへの適用<!DOCTYPE html> <html> <head> <styl