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

CSSの:activeセレクターとは？リンクがクリックされた瞬間のスタイル指定方法

CSSの:activeセレクターは、リンクがユーザーによってクリック（押下）されている瞬間に適用されるスタイルを指定するための擬似クラスです。マウスボタンが押されている間だけスタイルが反映されるため、クリック操作に対する視覚的なフィードビックを簡単に実装できます。

:activeセレクターの基本的な使い方

以下のコードでは、a:active を使って、リンクがクリックされた瞬間に背景色をオレンジ色に変更する例を紹介します。実際にコードを実行し、リンクをクリックして動作を確認してみてください。

サンプルコード

<!DOCTYPE html>
<html>
  <head>
    <style>
      a:active {
        background-color: orange;
      }
    </style>
  </head>
  <body>
    <a href="https://qries.com">Welcome to Qries</a>
    <p>上のリンクをクリックすると効果を確認できます。</p>
  </body>
</html>

動作のポイント

このコードを実行してリンクをクリックすると、ボタンを押し下げている間だけリンクの背景がオレンジ色に変化します。マウスボタンを離すと元の状態に戻ります。

  • 適用タイミング： 要素がアクティブ化されている（押されている）間のみスタイルが適用されます。
  • 対応要素： 主に <a> タグで使われますが、ボタンなど他の要素にも適用可能です。
  • モバイル対応： タッチデバイスではタップ中に一瞬表示される場合があります。

:hoverや:focusとの組み合わせ

実務では、:hover（マウスオーバー時）や :focus（フォーカス時）と組み合わせて使うことで、より自然なインタラクションを実現できます。その際は、L-V-H-A の順序（:link → :visited → :hover → :active）で記述するのがCSSの推奨ルールです。

  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