序章

親要素を選択することは、CSSだけを使用して行うことは長い間不可能でしたが、疑似クラス:focus-within は、そのストーリーをいくらか変更します。 フォーカスがある場合だけでなく、その内部要素(子孫)のいずれかにフォーカスがある場合にも、要素のスタイルを設定できます。 代表的な例は、ユーザーが入力要素の1つにフォーカスしたときに、コンテナー要素を特定の方法でスタイル設定するフォームです。

HTMLおよびCSSコード

フォームで:focus-withinを使用する例を次に示します。 このマークアップから始めましょう:

<form tabindex="0" class="myForm">
  <h3>What's your favorite color?</h3>
  <input type="text">
</form>

また、CSSルールは次のとおりです。

.myForm:focus-within {
  background: #f8f8f8
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 35px,
      rgba(255, 255, 255, 0.5) 35px,
      rgba(255, 255, 255, 0.5) 70px
    );
}
.myForm:focus-within::before {
  content: "I'm a happy selected form!";
  color: rgb(239, 187, 53);
}

作業デモ

サポートしているブラウザを使用している場合の結果を以下に示します。 フォーム自体がフォーカスされている場合、またはいずれかの入力がフォーカスされている場合に、含まれているフォーム要素に異なる背景がどのように適用されるかに注意してください。

:focus-within の代わりに古き良き:focus 疑似クラスを使用した場合、コンテナーフォームは、フォーカスがフォーム自体にある場合にのみスタイル設定されますが、入力に焦点が当てられています。

あなたの好きな色は何ですか?


CSSの背景パターンを提供してくれたLeaVerouに感謝します。

結論

:focus-within が期待どおりに機能するためには、コンテナーの内部要素がフォーカス可能であることを確認する必要があります。 入力要素はデフォルトでフォーカス可能ですが、たとえば、 div img 、またはp要素はフォーカスできません。 tabindex属性を使用して、要素をフォーカス可能にすることができます。 コンテナ要素は、コンテナだけからフォーカスするときにスタイリングを受け取るためにもフォーカス可能である必要があります。

ブラウザの互換性チェック: 2020年現在、すべての最新のブラウザはfocus-withinをサポートしていますが、バージョン固有の詳細なブラウザサポートについては、使用できますかを確認してください。