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

CSSの役割を解説：リンクセレクター（:link）の基本と使い方

CSSの:linkセレクターは、まだ訪問していないすべてのリンクにスタイルを適用するための擬似クラスです。ユーザーがクリックする前のリンクだけを対象にできるため、訪問済みリンクと未訪問リンクで見た目を変えたい場合に非常に便利です。

:linkセレクターとは

:linkは、href属性を持つアンカー要素（<a>タグ）のうち、ブラウザの履歴にまだ存在しない「未訪問」のリンクのみを選択します。すでにクリックして訪問済みのリンクには適用されない点が特徴です。

基本的な使い方

以下のコードでは、未訪問のリンクに対して背景色をオレンジ色に設定しています。

<!DOCTYPE html>
<html>
  <head>
    <style>
      a:link {
        background-color: orange;
      }
    </style>
  </head>
  <body>
    <a href="https://www.example.com">デモサイトへ移動</a>
  </body>
</html>

このコードを実行すると、ページ上のリンクがオレンジ色の背景で表示されます。リンクをクリックして訪問済みになると、:linkのスタイルは適用されなくなります。

関連するリンク擬似クラス

:linkと組み合わせて使うことの多い、リンク関連の擬似クラスも覚えておきましょう。

  • :visited … すでに訪問済みのリンクにスタイルを適用します。
  • :hover … マウスカーソルがリンク上にあるときにスタイルを適用します。
  • :active … リンクがクリックされている瞬間にスタイルを適用します。

使用時の注意点

:linkや:visitedなどの擬似クラスを複数定義する場合は、「LVHAの順序」（Link → Visited → Hover → Active）で記述するのが推奨されています。順序を守らないと、後から定義したスタイルが意図せず上書きされてしまうことがあります。

  1. CSSの:nth-last-of-type(n)セレクターとは？後ろから数えて要素を指定する方法

    CSSの:nth-last-of-type(n)セレクターは、親要素の中で同じ種類の兄弟要素を末尾（最後の子）から数えて、指定した順番に該当する要素を選択するための擬似クラスです。 例えば「:nth-last-of-type(2)」を指定すると、各親要素内で後ろから2番目に位置する<p>要素だけがスタイルの対象になります。通常の:nth-of-type()が先頭から数えるのに対し、:nth-last-of-type()は逆方向からカウントする点が大きな特徴です。 :nth-last-of-type(n)セレクターの基本構文 要素:nth-last-of-type(n) { /*

  2. 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