:focus-withinについて

  • 投稿日
  • 著者 くまだ
  • カテゴリー Web制作

どうも、くまだです。

CSSの疑似クラスの:focus-withinについて。

:focus-within

:focus-withinは、以下の場合でCSSが適用されます。

  • 要素自身がフォーカスを持つ
  • その子要素のいずれかがフォーカスを持つ

例えば、以下のようなフォームの入力欄の要素にフォーカスが当たった場合、スタイルが適用されます。

<form class="form">
        <div class="box">
          <label for="test1">test1</label>
          <input type="text" name="test1" id="test1">
        </div>
        <div class="box">
          <label for="test2">test2</label>
          <input type="text" name="test2" id="test2">
        </div>
        <button>ボタン</button>
</form>
input {
  border: 1px solid #000;
  width: 100%;
  height: 40px
}

button {
  background-color: blue;
  color: white;
  padding: 10px;
  margin-left: auto;
  margin-right: auto;
  display: block;

  margin-top: 10px;
}

.box {
  border: 1px solid #000;
  padding: 10px;
  display: block;
}

.box:focus-within {
  background-color: red;
}

See the Pen focus-within by kuma0605 (@kuma0605) on CodePen.

上記の場合、.box要素の子要素にフォーカスを持つ要素があるため、:focus-withinが適用されます。仮に.box要素の子要素にフォーカスを持つ要素がない場合、:focus-withinは適用されません。

フォーカスを持つ要素を強調したい場合に使えるかなと。

ここまで読んでくださりありがとうございました。

CSS

この記事を書いた人

くまだ

記事一覧