【入門編】 :focus-within 疑似クラス – CSS実践ガイド

こんにちは！フロントエンド・アーキテククトの私です。

日々のコーディング、本当にお疲れ様です。「CSSって覚えることが多すぎるし、ちょっとしたことでレイアウトが崩れてイライラする……」なんて、心が折れそうになっていませんか？大丈夫です、その道は誰もが通るいわば「CSSの登竜門」。一つひとつ紐解いていけば、必ず「なーんだ、そういうことか！」と視界が開ける瞬間がやってきます。

さて、今回スポットライトを当てるのは、CSSのちょっといぶし銀な機能でありながら、知ると「おっ、やるなこいつ！」と周りに差をつけられるスーパースター、`:focus-within`（フォーカス・ウィズイン）疑似クラスです。

なんだか名前からして難しそうですね。「ウィズイン？なにそれ美味しいの？」と思ったそこのあなた、大正解です。そのフランクな疑問からスタートしましょう！

—

1. `:focus-within` ってどんな子？（身近な例え話）

まず、基本の `:focus`（フォーカス）についておさらいしておきましょう。
これは、フォームの入力欄（``など）をクリックして、文字が打てる状態になったときに「私、今選ばれてます！」と主張するためのセレクタでしたよね。

じゃあ、その親戚である `:focus-within` は何をするのか。
英語の “within”（〜の内部に、〜の中に） という言葉がヒントです。

これを分かりやすく、身近な例えで説明しますね。

> 【例え話：百貨店の「総合インフォメーションカウンター」】
>
> 大きなデパートの1階を思い浮かべてください。そこには「インフォメーションカウンター」という、いくつかのパーツが集まった一つの大きな「エリア（枠組み）」があります。
>
> カウンターの中には、スタッフが座る椅子や、パンフレット置き場、そしてマイクがあります。
> お客さんがそのカウンターに近づき、マイクを取って話しかけたとします。

このとき、「マイクが使われている（＝フォーカスされている）」のはマイク自身ですが、デパートのフロア全体から見たら、「お、今あのインフォメーションカウンターの一帯が忙しく（アクティブに）動いているぞ！」と、カウンター全体がフューチャーされますよね。

`:focus-within` は、まさにこれと同じことをCSSでやってくれる子なんです。

`:focus` ＝「私（ピンポイントの部品）」が選ばれているときだけ反応する。
`:focus-within` ＝「私（親御さん）」の中にあるどれか一つの部品が選ばれたら、親御さんごとも一緒に「おっ、中が忙しくなったぞ！」と反応する。

つまり、「中にフォーカスされている要素がある親要素」を丸ごとキャッチできるのが、この `:focus-within` の正体なんです。

—

2. なぜこれが実務ですごく重宝されるのか？

初心者の頃、こんなデザインを実装して頭を抱えたことはありませんか？

> 「検索ボックスの枠全体を、入力中にだけパッと綺麗に光らせたい！でも、検索アイコンやボタンもその枠の中に入っているんだよなぁ……」

これ、昔のCSSだとJavaScriptの力を借りないと綺麗に制御するのが結構面倒でした。「あっちをクリックすると枠の色が変わるのに、こっち（中のアイコン）をクリックすると枠の光が消えちゃう！」なんてバグに悩まされたりして。

そんなとき、`:focus-within` を使えば一発解決です。
「検索ボックスという『親』の範囲内であれば、どこにフォーカスが当たっていようと、親であるボックス全体の枠線を綺麗に光らせてやる！」というスマートな指示が出せるようになります。

—

3. さあ、実際に書いて動かしてみよう！

百聞は一見にしかず。みんな大好き、検索フォームのスタイリングを例に、実際のコードを見てみましょう。コピペしてブラウザで試せるように書いておきました。

:focus-withinのデモ

コードのここがポイント！

`.search-box:focus-within` という書き方に注目してください。
これによって、「`input` に文字を打とうとカチッとクリックした瞬間」に、その外側にある `.search-box` 全体に影がついたり、枠線がピンク色に変わったりします。
ユーザービリティの観点からも、「今、自分はどこを操作しているのか」が視覚的にパッと一目で分かるため、とっても親切なUI（ユーザーインターフェース）が作れます。

—

4. つまずきやすいポイントと優しいフォロー

ここで、「あれ？動かないぞ？」となったときのチェックポイントをこっそりシェアしておきますね。

1. フォーカスできる要素（`input`, `button`, `a`タグなど）が中に入っていますか？
`:focus-within` はあくまで「フォーカスを受け取れる子孫要素」が存在して初めて機能します。ただの `div` タグの中に `div` が入っているだけでは、誰もフォーカスを受け取れないため反応しません。
2. ブラウザの対応は大丈夫？
安心してください。現代のモダンブラウザ（Chrome, Safari, Firefox, Edgeなど）はすべてバッチリ対応しています。「古いInternet Explorer（IE）で動かないんだけど……」という呪縛からはすでに解放されていますので、実務でガンガン使って大丈夫ですよ！

—

おわりに

CSSの疑似クラスと聞くと難しく身構えてしまうかもしれませんが、`:focus-within` は私たちの身近にある「連動する仕組み」をそのままコードにしただけの、とっても素直で便利な機能です。

「親が子を包み込み、子が頑張ると親がカッコよく変身する」
そんな温かい関係性を、ぜひあなたの次のコーディングに取り入れてみてくださいね。

Web制作の旅はまだまだ続きますが、焦らず、一歩ずつ、楽しみながらコードを書いていきましょう。あなたのコーディングライフを、心から応援しています！