CSSの疑似クラス「:focus-within」が素晴らしい理由

サイト構築 -CSS

Post on:2020年11月17日

はじめに

ここでお話するのは、フォーカスされた要素にスタイルする:focusセレクタのことではありません。:focus-withinは、その中の子孫要素（どれでも）にフォーカスが当たった時に起動するセレクタです。

:focus-withinを使用して、フォームにフォーカスを当てるとどうなるでしょう？

:focus-withinを適用

formタグに:focus-withinを使用すると、フォームの中のすべての要素にフォーカスが当たると起動します。
このデモの実装で:focus-withinを解説します。

HTMLの構造

HTMLはシンプルで、formタグ内に2つのinput要素があるフォームです。

<form>
  <label for="username">Username</label>
  <input type="text" name="username">

   <label for="password">Password</label>
  <input type="password" name="username">
</form>

<form>

<label for="username">Username</label>

<label for="password">Password</label>

</form>

デモに必要なのはこれだけです。

CSSの疑似クラス「:focus-within」

:focus-withinは、:beforeや:afterと同じ疑似セレクタです。
まず、フォームに基本的なスタイルを与えます。

body {
  display: flex;
  min-height: 100vh;
  justify-content: center;
  align-items: center;
}
form {
  border: 1px dashed #333;
  padding: 25px;
}

body {

display: flex;

min-height: 100vh;

justify-content: center;

align-items: center;

}

form {

border: 1px dashed #333;

padding: 25px;

}

これでフォームがページの中央に配置され、エフェクトに使用するボーダーが表示されます。
参考: テキストや画像を上下左右の中央寄せに配置、最近主流になっている実装方法

フォームの入力時にユーザーの注意を引き付けるため、ユーザーが入力欄にフォーカスした時にフォームを少し目立つカラーに変更します。

form {
  border: 1px dashed #333;
  padding: 25px;
  transition: background 0.3s ease;
}
form:focus-within {
    background: #f4d35e;
}

form {

border: 1px dashed #333;

padding: 25px;

transition: background 0.3s ease;

}

form:focus-within {

background: #f4d35e;

}

form:focus-withinを使用すると、formの子孫要素（ここでは入力欄の2つ）にフォーカスがあたるとフォームの背景がイエローに変わります。

実際の動作は、Codepenでご覧ください。

See the Pen
Why CSS :focus-within is amazing by Chris Bongers (@rebelchris)
on CodePen.

:focus-withinの効果をより素晴らしいものにする

box-shadowのテクニックを使用して、モーダルエフェクトを加えることで、より素晴らしいものにすることができます。

form {
  border: 1px dashed #333;
  padding: 25px;
  transition: all 0.3s ease;
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0);
}
form:focus-within {
  background: #f4d35e;
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.7);
}