CSSの:linkで未訪問リンクのスタイルを設定する方法をわかりやすく解説

2024.09.13
スポンサーリンク

:link は、まだ訪問されていないリンクにスタイルを適用するためのCSS擬似クラスです。リンクは、訪問されると:visited擬似クラスが適用されますが、:linkは、訪問されていない状態のリンクに対してのみスタイルを設定する際に使用します。

スポンサーリンク

:link の値とその効果の一覧

  • :link – 未訪問のリンクにスタイルを適用します。

注意点や関連情報

:link は通常、:visitedや:hoverと組み合わせて使用されます。リンクの状態ごとに異なるスタイルを適用するため、これらの擬似クラスを適切に並べることが重要です。また、:link は、訪問されたリンクには適用されません。

:linkが効かない理由として考えられること

要素がリンク要素でない

:linkは、未訪問のリンク要素に適用される擬似クラスです。<a>タグにhref属性が設定されていない場合、要素はリンクとして扱われず、:linkも適用されません。
対策：リンク要素にhref属性が正しく設定されているか確認します。例えば、<a href="https://example.com">リンク</a>のようにhrefを指定します。

リンクがすでに訪問済みで:visitedが適用されている

:linkは未訪問のリンクに対してのみ適用されます。リンクが訪問済みの場合は:visitedが適用され、:linkのスタイルは反映されません。
対策：リンクが訪問済みでないことを確認し、:linkと:visitedを適切に使い分けます。

共通するCSSコード

.css-sample-container {
    padding: 20px;
    border: 1px solid #ccc;
    margin-bottom: 20px;
    max-width: 400px;
}

.css-sample-link {
    text-decoration: none;
    color: blue;
}

表示例

CSS :link

HTMLコード

<div class="css-sample-container">
    <a href="https://www.serlipsodjfpoej.com" class="css-sample-link">未訪問のリンク</a>
    <a href="https://www.google.com" class="css-sample-link">既に訪問したリンク</a>
</div>

CSSコード

.css-sample-link:link {
    color: green;
}

.css-sample-link:visited {
    color: purple;
}

表示結果

未訪問のリンク
既に訪問したリンク

この例では、まだ訪問されていないリンクは緑色で表示され、訪問済みのリンクは紫色で表示されています。

まとめ

  • :link は、未訪問のリンクにスタイルを適用するために使用します。
  • :visited擬似クラスと組み合わせて、リンクの状態に応じたスタイルを設定できます。
  • リンクの状態を区別するために、:hoverや:activeとも組み合わせて使うことが一般的です。
スポンサーリンク