“:focus”擬似クラス｜CSSセレクタ｜CSS－havin' a coffee break

＃

“:focus”擬似クラス

“:focus”擬似クラスはフォーカスされている要素を選択する擬似クラスです。

通常、パソコンではマウスで要素をクリックした時やキーボードの[Tab]キーによる順次ナビゲーションによって要素をフォーカスすることができます。また、フォームの入力欄は入力中にフォーカス状態になります。

文書の記述言語によってはどの要素がフォーカスできるのかを定義している場合があります。また、文書の記述言語によってはホバーされている状態を判断する追加の方法を定義している場合があります。ただし、要素の子孫要素がフォーカスされているだけでは“:focus”擬似クラスでは選択できません。

要素は“:any-link”擬似クラス、“:link”擬似クラス、“:visited”擬似クラス、“:hover”擬似クラス、“:focus”擬似クラス、“:active”擬似クラスなどの擬似クラスの中から複数の擬似クラスから同時に選択される場合があります。同じ要素に対して複数の擬似クラスを併用する場合にはスタイルが競合することがありますので、記述する順序に気を付ける必要があります。

＃

フォーカスできる要素

文書の記述言語によってはどの要素がフォーカスできるのかを定義している場合があります。HTMLでは通常は以下の要素がフォーカス可能です。

“href”属性がある“a”要素
無効化されていない“button”要素
無効化されておらず、“type”属性の値が“hidden”以外の“input”要素
無効化されていない“select”要素
無効化されていない“textarea”要素
“draggable”属性がある要素
“area”要素で表されるイメージマップの領域
“controls”属性がある“audio”要素と“video”要素
その他のユーザー操作可能なコンテンツ

＃

使用例



textarea {


 border: solid 5px #00a381; /*■*/


}





textarea:hover {


 border: solid 5px #fabf14; /*■*/


}





textarea:focus {


 border: solid 5px #e198b4; /*■*/


}





textarea:active {


 border: solid 5px #93ca76; /*■*/


}