:focus と :active の違いは何ですか? 質問する

:focusこれらは:active2 つの異なる状態です。

• :focus要素が現在入力を受け付けるために選択されている状態を表し、
• :active要素が現在ユーザーによってアクティブ化されているときの状態を表します。

たとえば、 があるとします<button>。 は、<button>最初は状態を持ちません。ただ存在するだけです。 を使用してTabに「フォーカス」を与えると<button>、 はその:focus状態になります。次に をクリック (または を押すspace) すると、ボタンは ( :active) 状態になります。

その点では、要素をクリックすると、その要素にフォーカスが当てられ、 と が:focus同じ:activeであるという錯覚も生じます。これらは同じではありません。クリックすると、ボタンは の:focus:active状態になります。

例：

<style type="text/css">
  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!<br />
  But not when focused only,<br />
 where my text just turns red
</button>