CSS :focus-within擬似クラスセレクタ

`:focus-within`の定義と使用方

:focus-within擬似クラスは、
要素自身またはその子要素のいずれかがフォーカスされている間、その親要素を選択します。
このセレクタは、親要素にスタイルを適用できる点で、:focus擬似クラスとは異なります。

「フォーカス（focus）」とは、
要素がキーボード入力やユーザーの操作を受け付ける準備が整っている状態を指します。主に、ユーザーがTabキーを押したり、クリックしたりして要素にアクセスしたときに発生します。

基本的な例

HTML

<form>
    <fieldset>
        <legend>名前を入力してください。</legend>
        <label for="user-name">Username</label>
        <input type="text" id="user-name" placeholder="名前を入力...">
    </fieldset>
</form>

CSS

fieldset {
    padding: 1em;
}
fieldset:focus-within { /* 自身または子要素がフォーカスされている間に選択される */
    background-color: yellow;
}

:focus-within擬似クラスは、その要素の子要素のいずれかがフォーカスされている間も適用されるため、主に視覚的なウェブアクセシビリティの向上に使用され、キーボードでサイトを操作したり、アクセシビリティを考慮したデザインを実装する際に役立ちます。

:focus-within擬似クラスの書式は次の通りです。

構文

応用例

:focus-within擬似クラスは、インタラクティブでアクセシビリティに優れたウェブコンポーネントを作成する際に特に有用です。
子要素がフォーカスを受けたときに親要素にスタイルを適用できるため、ユーザーエクスペリエンスの向上に大きく貢献します。
以下は、実際によく使われる例を通してこのセレクタの活用方法を示したものです。

フォーカスされたフォーム領域の強調

HTML

<form>
    <fieldset>
        <legend>連絡先情報</legend>
        <label for="email">メールアドレス</label>
        <input type="email" id="email" placeholder="メールアドレス">
    </fieldset>
</form>

CSS

fieldset {
    padding: 1em;
    border: 2px solid gray;
    transition: border-color 0.3s ease;
}
fieldset:focus-within {
    border-color: blue;
    background-color: #e6f0ff;
}

ユーザーが<fieldset>内の入力フィールドにフォーカスを当てると、親要素である<fieldset>に枠線の色と背景色が適用され、視覚的に強調されます。これにより関連する入力要素をひとつの領域として明確に区別でき、フォームの使いやすさとアクセシビリティの向上に役立ちます。また、トランジション効果によりスタイルの変化が滑らかに表示され、ユーザーエクスペリエンスがさらに向上します。

フォーカスされたカードの強調

HTML

<div class="card" tabindex="0">
    <h3>製品タイトル</h3>
    <p>この製品に関する簡単な説明です。</p>
    <button>詳細を見る</button>
</div>
<div class="card" tabindex="0">
    <h3>別の製品</h3>
    <p>他の製品に関する簡単な説明です。</p>
    <button>詳細を見る</button>
</div>

CSS

.card {
    border: 1px solid #ccc;
    padding: 1em;
    margin: 1em 0;
    border-radius: 4px;
    box-shadow: 0 0 5px rgba(0,0,0,0.1);
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
    outline: none;
}
.card:focus-within {
    border-color: #007acc;
    box-shadow: 0 0 10px #007acc;
}

各<div class="card">要素にtabindex="0"属性を付けることで、キーボードフォーカスを受け取ることができます。カード内部のボタンなど、フォーカス可能な要素にアクセスすると、:focus-withinセレクタが適用され、カードの枠線とボックスシャドウが変わってカードが強調されます。この視覚的フィードバックにより、現在フォーカスされているカードがどれかを簡単に識別でき、特にキーボード操作でのナビゲーションを行うユーザーにとって有用なアクセシビリティを提供します。