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

CSSの:link疑似クラスの使い方をわかりやすく解説

CSSの:link疑似クラスは、まだ訪問していないリンクに特別なスタイルを適用するために使用します。値には、任意の有効な形式で記述された色名やカラーコード（HEX、RGB、HSLなど）を指定できます。

:link疑似クラスとは？

Webページ上のリンクは、ユーザーがクリック済みかどうかによって状態が変化します。:linkはそのうち「未訪問のリンク」のみを対象とするセレクターです。これにより、訪問前と訪問後でリンクの見た目を切り替えることができます。

基本的な使用例

以下の例では、未訪問のリンクの文字色を黒（#000000）に設定しています。

<html>
   <head>
      <style>
         a:link {
            color: #000000;
         }
      </style>
   </head>
   <body>
      <a href="">
         デモリンク
      </a>
   </body>
</html>

:visitedとの組み合わせ

:linkは、訪問済みリンクにスタイルを適用する:visitedと対になる疑似クラスです。両方を使うことで、ユーザーがどのページをすでに閲覧したかを視覚的に伝えられます。

注意点：疑似クラスの指定順序

複数のリンク関連疑似クラスを使用する場合は、CSSの仕様上、以下の順序（LVHA順）で記述することが推奨されています。

  1. :link — 未訪問のリンク
  2. :visited — 訪問済みのリンク
  3. :hover — マウスオーバー中のリンク
  4. :active — クリックされている最中のリンク

この順序を守らないと、後から宣言したスタイルが先のものを上書きし、意図した通りに表示されなくなることがあります。

  1. CSSのcubic-bezier()関数の使い方をわかりやすく解説

    CSSでカスタムのイージング（加速・減速のカーブ）を定義したいときに便利なのが、cubic-bezier()関数です。この関数を使うことで、トランジションやアニメーションの速度変化を4つの制御点の値で細かく調整できます。cubic-bezier()関数とはcubic-bezier(x1, y1, x2, y2)の形式で指定し、それぞれの引数には0〜1の範囲（x軸）および任意の値（y軸）を取る数値を渡します。ベジェ曲線の形状によって、アニメーションが「ゆっくり始まって速く終わる」「一瞬オーバーシュートして戻る」などの表現が可能になります。実装例以下のコードでは、マウスホバー時にdiv要素の幅が3

  2. CSSの疑似クラス（Pseudo Class）とは？基本の書き方と実用例をわかりやすく解説

    CSSの疑似クラス（Pseudo Class）は、要素の特別な状態を表現するための仕組みです。ドキュメント内の要素そのものだけでなく、「状態」「位置」「履歴」などといった外的な要素も捉えることができます。たとえば「マウスカーソルが乗っている要素」「すでに訪問済みのリンク」「入力値が有効なフォームフィールド」といった状態は、通常のCSSセレクターでは直接指定できません。こうした場合でも、疑似クラスを使えば柔軟にスタイルを適用できます。疑似クラスの基本構文疑似クラスは、セレクターの後ろにコロン（:）を付けて記述します。Selector:pseudo-class {   &nbs