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

CSSの:activeセレクタでアクティブリンクの色を変更する方法

クリックされた瞬間のリンク（アクティブなリンク）の色を変更したい場合は、CSSの:active疑似クラスを使用します。:activeは、ユーザーがリンクを押し下げている間に適用されるスタイルを指定できるセレクタです。

以下のコードを実行すると、アクティブなリンクの色がピンク系の色（#FF00CC）に変わることを確認できます。

サンプルコード

<html>
   <head>
      <style>
         a:active {
            color: #FF00CC
         }
      </style>
   </head>
   <body>
      <a href = "">デモ用リンク</a>
   </body>
</html>

補足：リンクの状態ごとのスタイル指定

リンクの見た目は、ユーザーの操作状態に応じて複数の疑似クラスで細かく制御できます。組み合わせて使うと、より使いやすいナビゲーションを作れます。

  • :link … 未訪問のリンクに適用
  • :visited … 訪問済みのリンクに適用
  • :hover … マウスカーソルが重なっているときに適用
  • :active … クリック（押下）されている間に適用

なお、これらの疑似クラスは宣言順序が重要です。:hoverや:activeのスタイルが正しく反映されないことを防ぐため、「LVHA（:link → :visited → :hover → :active）」の順序で記述するのが一般的なベストプラクティスとされています。

  1. CSSでリンクの色を設定する方法｜colorプロパティと疑似クラスの使い方

    CSSを使えば、リンクのテキストに自由に色を付けることができます。要素内のテキストの色を指定するには、color プロパティを使用します。さらに、リンクの状態に応じて色を変えたい場合は、疑似クラスを活用します。疑似クラスは :link → :visited → :hover → :active の順序で記述するのが基本です。これは「LVHAルール」とも呼ばれており、この順序を守ることで各スタイルが意図どおりに適用されます。構文CSSの color プロパティの基本構文は以下のとおりです。Selector {    color: /*値*/ }サンプルコード1次の例では、リン

  2. CSSでプレースホルダーの色を変更する方法｜::placeholder疑似要素の使い方

    CSSで入力フォームのプレースホルダー（placeholder）の文字色を変更するには、::placeholder 疑似要素を使用します。ただし、ブラウザによって対応状況が異なるため、Internet Explorer や旧 Microsoft Edge 向けのベンダープレフィックスも併せて指定しておくと、より多くの環境で意図した色が反映されます。それぞれのセレクタの役割は以下の通りです。::placeholder … 標準的な疑似要素（Chrome・Firefox・Safari などの主要ブラウザに対応）:-ms-input-placeholder … Internet Explorer 1