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

CSSの:visitedセレクターとは？訪問済みリンクへのスタイル適用方法

CSSの:visitedセレクターは、ユーザーがすでに訪問したことのあるリンクにスタイルを適用するための擬似クラスです。このセレクターを活用することで、未訪問のリンクと訪問済みのリンクを視覚的に区別でき、ユーザーにとって分かりやすいナビゲーションを実現できます。

:visitedセレクターの基本

:visitedセレクターは、主に<a>タグ（アンカータグ）と組み合わせて使用されます。「a:visited」のように記述すると、ページ内のすべての訪問済みリンクに対して指定したスタイルが反映されます。多くの場合、「a:link」（未訪問リンク）とセットで定義し、リンクの状態に応じて見た目を切り替えます。

サンプルコード

以下のコードでは、:linkと:visitedでリンクの基本スタイルを定義し、さらに:hover（マウスオーバー時）と:active（クリック中）のスタイルも併せて設定しています。実際にブラウザーで実行してみてください。

<!DOCTYPE html>
<html>
    <head>
        <style>
            a:link, a:visited {
                background-color: white;
                color: black;
                border: 1px solid blue;
                padding: 30px 30px;
                text-align: center;
                text-decoration: none;
                display: inline-block;
            }
            a:hover, a:active {
                background-color: red;
                color: white;
            }
        </style>
    </head>
    <body>
        <a href="demo.html" target="_blank">デモリンク</a>
    </body>
</html>

表示結果のポイント

  • a:link / a:visited：背景が白、文字色が黒、青い枠線付きのボタンのようなデザインが適用されます。
  • a:hover / a:active：マウスカーソルを重ねたとき、またはクリックしている間は、背景が赤色、文字色が白色に変化します。

注意点：プライバシー保護による制限

ブラウザーはユーザーの閲覧履歴を保護するため、:visitedセレクターで利用できるCSSプロパティには制限があります。実際に指定できるのは、color、background-color、border-colorなどの一部の色関連プロパティのみで、フォントサイズや余白（padding）などレイアウトに関わる変更は適用されません。また、JavaScriptを使ってリンクが訪問済みかどうかを判定することもできません。これらの制限を理解した上で、:visitedセレクターを活用しましょう。

  1. CSSの:nth-last-child(n)セレクターとは？使い方と実装例を解説

    CSSの:nth-last-child(n)セレクターとは :nth-last-child(n)は、CSSの擬似クラスの一つで、親要素の子要素を末尾（最後の子）から数えてn番目に該当する要素を選択するためのセレクターです。 例えば、段落やリスト項目が多数並んでいる場合に、「先頭から」ではなく「最後から何番目か」という位置を基準にスタイルを適用したいときに便利です。要素の総数が動的に変化するコンテンツでも、末尾からの位置指定なら安定したデザイン制御が可能になります。 基本的な書き方 p:nth-last-child(4) { background: blue; color: white

  2. CSSのユニバーサルセレクター（*セレクター）とは？使い方を実例付きで解説

    CSSの *（アスタリスク）セレクターは「ユニバーサルセレクター」と呼ばれ、HTML DOM内のすべての要素をまとめて選択するためのセレクターです。タグ名やclass名を個別に指定しなくても、ページ上の全要素に同じスタイルを一度に適用できるため、リセットCSSやデフォルトスタイルの統一などによく使われます。 構文 CSSユニバーサルセレクターの基本構文は以下のとおりです。 * {     /* スタイル宣言 */ } それでは、具体的な使用例を見ていきましょう。 例1：すべての要素に共通のスタイルを適用する <!DOCTYPE html> &