CSS の :focus 疑似クラスと :active 疑似クラスの違いは何ですか?

Distinction Between :focus and :active Pseudo-Classes

Understanding the difference between the :focus and :active states is crucial when working with CSS. These pseudo-classes represent distinct element states that come into play when interacting with HTML elements.

What is :focus?

The :focus state indicates that an element has received input focus. This state is typically triggered when an element receives keyboard input or when the user selects it using other focusable mechanisms. Elements like form elements (:input, :button, :a), frame/:iframe behave this way.

What is :active?

The :active state represents an element that is currently being activated by the user. This state is common in interactive scenarios, such as when a user clicks a button or presses a key. For instance, a button typically enters the :active state when clicked and is released.

How to Differentiate :focus and :active

While seemingly similar when an element is clicked, :focus and :active are distinct states. When a user clicks on an element, it receives both focus and activation, resulting in the :focus:active state. However, these states can be triggered independently. For example, an element can be focused without activation (e.g., using tab) and vice versa.

Example

Consider the following HTML and CSS code:

<style>
  button { font-weight: normal; color: black; }
  button:focus { color: red; }
  button:active { font-weight: bold; }
</style>

<button>
  When clicked, my text turns red AND bold!&lt;br /&gt;
  But not when focused only,&lt;br /&gt;
 where my text just turns red
</button>

When you focus on the button (using tab) without clicking it, the text will only turn red. When you click the button, the text will turn red and bold, indicating that the button is both focused and activated.

以上がCSS の :focus 疑似クラスと :active 疑似クラスの違いは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。