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のデモのスクリーンショットとそのコードを一部抜粋したもの。

f:id:maiha2:20170704125729g:plain

<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)のことを考えると実際のウェブサイトで利用するのは難しいなあと思った(リンク先の記事にもそのようなことが書いてある)。

ウェブサイトのフォームを実装するときには活用したい。おわり。