最近便利なCSSおれおれAdvent Calendar 2023 – 03 日目

a:focus とか便利なんですよねシリーズもうひとつです。

  • :focus-visible – キーボードを使ってナビゲーションしているとき（昨日）
  • :focus-within – 自身か子孫要素にフォーカスがあるとき

:hover と :focus-within を併用する

例えばカードとか。クリックできる UI 単位でなくても :hover でちょっと外観を変えたいことはまあまあありますよね。

そういう UI がボタンや入力欄といったコントロールを持つときは :focus-within も併用しておくと素敵です。マウスカーソルを外へ持って行ってもフォーカスが残ってる間は :hover と同じ見た目にしておくことができます。

デモ：

.Card {
  background-color: #f9f9f9;

  &:hover,
  &:focus-within {
    background-color: #fcfcfc;
  }
}

おしまい

Can I Use によると 2020 年あたりから使えるようになったみたいです。まあまあ歴史がある。

参考