：focusと：activeの違いは何ですか？

: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>

編集：jsfiddle

:active       Adds a style to an element that is activated
:focus        Adds a style to an element that has keyboard input focus
:hover        Adds a style to an element when you mouse over it
:lang         Adds a style to an element with a specific lang attribute
:link         Adds a style to an unvisited link
:visited      Adds a style to a visited link

出典：CSS疑似クラス

4つのケースがあります。

1. デフォルトでは、アクティブとフォーカスの両方がオフになっています。
2. ときあなたは、タブを順番にフォーカス可能な要素、彼らが入ります:focus（アクティブなし）。
3. フォーカスできない要素をクリックすると、要素が表示されます:active（フォーカスなし）。
4. フォーカス可能な要素をクリックすると、要素が入ります:active:focus（アクティブで同時にフォーカスされます）。

例：

<div>
  I cannot be focused.
</div>

<div tabindex="0">
  I am focusable.
</div>

div:focus {
  background: green;
}

div:active {
  color: orange;
}

div:focus:active {
  font-weight: bold;
}

ページが両方読み込まれる場合は、ケース1です。タブを押すと、2番目のdivにフォーカスし、ケース2が表示されます。最初のdivをクリックすると、ケース3が表示されます。2番目のdivをクリックすると、ケース4が表示されます。 。

要素がフォーカス可能かどうかは別の問題です。ほとんどはデフォルトではありません。しかし、それは仮定しても安全です<a>、<input>、<textarea>デフォルトでフォーカス可能です。

：focusは、要素が入力を受け入れることができるときです-入力ボックス内のカーソルまたはタブ付きのリンク。

：activeは、要素がユーザーによってアクティブ化されているとき-ユーザーがマウスボタンを押してから離すまでの時間です。

アクティブは、ユーザーがそのポイントをアクティブにしたときです（マウスクリックのように、フィールドからフィールドへのタブを使用する場合、アクティブスタイルからの兆候はありません。クリックにはさらに時間が必要な場合があります。そのポイントを長押ししてください）。ポイントがアクティブになります。これを試して ：

<style type="text/css">
  input { font-weight: normal; color: black; }
  input:focus { color: green; outline: 1px solid green; }
  input:active { color: red; outline: 1px solid red; }
</style>

<input type="text"/>
<input type="text"/>

フォーカスはキーボード入力によってのみ指定できますが、要素はマウスまたはキーボードの両方でアクティブ化できます。

リンクに：focusを使用する場合、スタイルルールはキーボードのボタンを押した場合にのみ適用されます。

「フォーカス」を使用すると、キーボードユーザーはマウスユーザーがマウスでホバーしたときと同じ効果が得られます。Internet Explorerで同じ効果を得るには、「アクティブ」が必要です。

現実には、これらの状態はすべてのユーザーに対して期待どおりに機能しません。3つすべてのセレクターを使用しないと、物理的にマウスを使用できないキーボードのみのユーザーの多くにアクセシビリティの問題が発生します。#nomouseチャレンジ（nomouse dot org）にご参加ください。