focus-within疑似クラス
CSS Selectors Level 4(Editor’s Draft, 16 June 2017)
に :focus-within
擬似クラスというのがある。Firefox52以上とSafari10.1以上、iOS Safari10.3以上で実装されている(Can I use... Support tables for HTML5, CSS3, etc)。
:focus-within
は、
:focus
が適用される要素:focus
が適用される要素を子孫に持つ要素
にマッチする要素に適用される。
以下は、:focus-within - CSS | MDNのデモのスクリーンショットとそのコードを一部抜粋したもの。
<div class="name-container"> <label for="given_name"> Given Name: <input id="given_name" type="text"> </label> <label for="family_name"> Family Name: <input id="family_name" type="text"> </label> </div>
.name-container { padding: 4px; } .name-container:focus-within { background: yellow; } input { margin: 4px; }
便利そうだけどデモのようなフォーム以外に活用するシーンが考えられなかった。:focus-within
を使ってドロップダウンメニューをつくるというのをそろそろ使える :focus-within 疑似クラス | 富永日記帳などで見たが、アクセシビリティ(WAI-ARIA)のことなどを考えると実際のウェブサイトで利用するのは難しいなあと思った(リンク先の記事にもそのようなことが書いてある)。
ウェブサイトのフォームを実装するときには活用したい。おわり。