最近便利なCSSおれおれAdvent Calendar 2023 – 03 日目 a:focus とか便利なんですよねシリーズもうひとつです。 :focus-visible – キーボードを使ってナビゲーションしているとき(昨日) :focus-within – 自身か子孫要素にフォーカスがあるとき :hover と :focus-within を併用する 例えばカードとか。クリックできる UI 単位でなくても :hover でちょっと外観を変えたいことはまあまあありますよね。 そういう UI がボタンや入力欄といったコントロールを持つときは :focus-within も併用しておくと素敵です。マウスカーソルを外へ持って行ってもフォーカスが残ってる間は :hover と同じ見た目にしておくことができます。 デモ: https://codepen.io/ginpei/pen/eYxQvbR
![:focus-withinで広域のフォーカス表示が便利(最近便利なCSSおれおれAdvent Calendar 2023 – 03日目) | Ginpen.com](https://cdn-ak-scissors.b.st-hatena.com/image/square/de4af7f62b39439905833504e59ba1e153be6d8b/height=288;version=1;width=512/https%3A%2F%2Fginpen.com%2Fwp-content%2Fthemes%2Fginpen-theme%2Fimg%2Ficon-512.png)