自分自身または子孫要素にフォーカスがあるときにマッチする擬似クラスです。入力中の検索ボックス全体をハイライトしたり、フォーカスでドロップダウンを開いたりと、「中にフォーカスがある親」の装飾がJavaScriptなしで書けます。
:focus-within.search-box:focus-within {
border-color: #2563eb;
box-shadow: 0 0 0 3px rgb(37 99 235 / 0.2);
}中のinputにフォーカスがあるとき検索ボックス全体を強調
.dropdown .menu {
visibility: hidden;
}
.dropdown:focus-within .menu {
visibility: visible;
}キーボードフォーカスで開閉するアクセシブルなメニュー
アイコンとinputを組み合わせた複合フォームコントロールの「見た目上のフォーカスリング」に最適です。キーボード操作時だけに限定したい場合は:has(:focus-visible)という選択肢もあります。
:focusは「その要素自身」、:focus-withinは「自身+子孫」です。また:focus-withinはマウスクリックのフォーカスにも反応するため、キーボード限定にしたい場合は:has(:focus-visible)を使い分けます。
AIは「入力中に親要素を装飾」という要望にfocusin/focusoutイベントで親にクラスを付けるJavaScriptを提案しがちですが、:focus-withinで1行です。逆に:focus-visibleと:focus-withinを混同した説明をすることもあります（前者はキーボード判定、後者は子孫判定で直交する概念）。
アイコン付き検索ボックスで、中のinputにフォーカスしたら外枠全体が光るデザインを:focus-withinで実装して
このJSでクラス切替しているフォーカス時のカード強調を:focus-withinに置き換えて
そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。