CSSの:focus-withinで子要素がフォーカスされた際に親要素へスタイルを適用する方法をわかりやすく解説

2024.09.13
スポンサーリンク

:focus-within は、ある要素内の子要素がフォーカスを持っている場合に、その親要素にスタイルを適用する擬似クラスです。通常、フォームの入力欄やボタンなどがフォーカスされた際に、そのフォーカスされた要素を囲む親要素に視覚的な変化を加えたい場合に使用されます。

スポンサーリンク

:focus-within の値とその効果の一覧

  • :focus-within – 要素内の子要素がフォーカスを持っているときにスタイルが適用されます。

注意点や関連情報

:focus-withinは、フォーカスが内部の子要素に移った際に、親要素にスタイルを適用します。これにより、フォームのグループやコンテナ全体が、フォーカスされた時にわかりやすく表示されます。

:focus-withinが効かない理由として考えられること

子要素にフォーカス可能な要素がない

:focus-withinは、子要素がフォーカスされたときに親要素にスタイルを適用します。フォーカス可能な要素（例：<input>や<button>など）が子要素に存在しない場合、:focus-withinは機能しません。
対策：親要素内にフォーカス可能な要素が含まれていることを確認します。必要に応じて、<input>、<textarea>、<a>などの要素を追加します。

フォーカス可能な要素がdisabledまたはreadonlyになっている

子要素にフォーカス可能な要素があっても、disabledやreadonlyが設定されていると、フォーカスを受け取ることができないため、:focus-withinは機能しません。
対策：disabledやreadonlyが不要な場合、それらを削除してフォーカス可能な状態にします。

共通するCSSコード

.css-sample-container {
    padding: 20px;
    border: 1px solid #ccc;
    margin-bottom: 20px;
}
.css-sample-box {
    padding: 10px;
    border: 2px solid #333;
    background-color: #f0f0f0;
}
.css-sample-box:focus-within {
    border-color: blue;
    background-color: #e0f7fa;
}
.css-sample-input {
    padding: 8px;
    margin-top: 10px;
}

表示例

CSS :focus-within

HTMLコード

<div class="css-sample-container">
    <div class="css-sample-box">
        <label for="input1">名前</label>
        <input type="text" id="input1" class="css-sample-input">
    </div>
</div>

CSSコード

.css-sample-box:focus-within {
    border-color: blue;
    background-color: #e0f7fa;
}

表示結果

入力フィールドがフォーカスされた際に、ボックス全体の背景色が青く変わり、ボーダーの色も青になります。フォーカスが外れると、元のスタイルに戻ります。

まとめ

  • :focus-within は、親要素に対して子要素がフォーカスされたときにスタイルを適用します。
  • フォーム全体やグループコンテナを強調するために効果的です。
  • 視覚的にわかりやすいフィードバックを提供することで、ユーザー体験を向上させます。
スポンサーリンク