【CSS】擬似クラスの「:focus-within」の使い方！【分かりやすい】

こんばんは！初めましての方は初めまして！
しゅーた（@chibasyuta）です！

この記事ではCSSの擬似クラスの「:focus-within」の使い方について解説します。

擬似クラスの「:focus-within」って何？？

このような方が対象です。

また、下の動画でも擬似クラスの「:focus-within」の使い方について詳しく解説しているので、一緒に実際にコードを書きながら学びたい方はこちらをどうぞ！

それでは内容へ入ります！

「:focus-within」を使うと何ができる？

<form action="">

    <label for="name">名前　<input type="text" name="name" id="name"></label>

    <label for="name">出身　<input type="text" name="birthplace" id="birthplace"></label>

    <label for="name">職業　<input type="text" name="profession" id="profession"></label>

    <button>ボタン</button>

</form>

label:focus-within {
    font-weight: bold;
    font-size: 33px;
}

擬似クラスの「:focus-within」を使うと「フォーカス状態にある要素」もしくは「子孫要素にフォーカスがある要素」にスタイルを当てることができます。

なるほどね！

「input要素」ではなく「label要素」などにスタイルを当てる際に使う

擬似クラスの「:focus-within」の特徴は下記の通りです。

• 「その要素」
• もしくは「その子孫要素」に
• 「フォーカス状態の要素」を持つ要素
• にスタイルが当たる

これが「:focus-within」の特徴です。

「label要素」などの、「直接フォーカスが当たる訳ではない要素」にスタイルを当てることができる、というのが特徴ですね。

これはイイね！

「フォーカス」とは何か？

Webにおける「フォーカス」とは、ユーザーが「特定の要素に焦点を当てている状態」を指します。

例えば、「入力欄」に「テキストを入力することができる状態」などです。

入力欄を「クリック」や「タップ」することで「フォーカス」することができます。「Tabキー」でもフォーカスすることができますね。

参考リンク。

仕様書。
https://drafts.csswg.org/selectors/#the-focus-within-pseudo

MDN。
https://developer.mozilla.org/ja/docs/Web/CSS/:focus-within

あわせて読みたい記事。

まとめ

擬似クラスの「:focus-within」を使うと「フォーカス状態にある要素」もしくは「子孫要素にフォーカスがある要素」にスタイルを当てることができる。

Webにおける「フォーカス」とは、ユーザーが「要素に焦点を当てている状態」を指す。

例えば、「入力欄」に「テキストを入力することができる状態」など。

この記事が気に入った方は僕のTwitter（@chibasyuta）のフォローもお願いします！

また、下の動画でも擬似クラスの「:focus-within」の使い方について詳しく解説しているので、一緒に実際にコードを書きながら学びたい方はこちらをどうぞ！

それではこんな感じでこの記事を終わります！

ではまた！