CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSの:focus-within疑似クラスの使い方をわかりやすく解説

フォーカスを受け取った要素そのものだけでなく、その親要素にもスタイルを適用したい場合は、CSSの:focus-within疑似クラスを使用します。

:focus-withinは、「要素自身、またはその子孫要素のいずれかがフォーカスを持っているとき」に一致する疑似クラスです。フォーム全体やカード型レイアウトなど、入力フィールドを含むコンテナの見た目を動的に変化させたい場面で特に便利です。

以下に、CSSの:focus-within疑似クラスの具体的な使用例を示します。

例1：フォームへの適用

<!DOCTYPE html>
<html>
<head>
<style>
form {
   margin: 2%;
   padding: 2%;
   display: flex;
   flex-direction: column;
   background: thistle;
}
input {
   margin: 2%;
}
form:focus-within {
   background-color: burlywood;
   box-shadow: 0 0 12px rgba(0,0,0,0.6)
}
input:focus {
   box-shadow: 0 0 12px rgba(0,0,0,0.6)
}
</style>
</head>
<body>
<form>
<input type="text" placeholder="name"/>
<input type="email" placeholder="email"/>
</form>
</body>
</html>

出力結果

このコードを実行すると、次のような結果になります。

CSSの:focus-within疑似クラスの使い方をわかりやすく解説

名前欄またはメールアドレス欄のいずれかのinput要素にフォーカスを当てると、フォーム全体の背景色がthistle（シスル）からburlywood（バーリーウッド）へ変化し、box-shadowによる影も表示されます。これは、:focus-withinによって親要素であるformに対してスタイルが適用されるためです。

例2：div要素への適用

<!DOCTYPE html>
<html>
<head>
<style>
div {
   width: 40%;
   margin: 2%;
   padding: 2%;
   display: flex;
   flex-direction: column;
   background: lavenderblush;
}
div > * {
   margin: 2%;
}
div:focus-within {
   background-color: aliceblue;
   box-shadow: 0 0 12px rgba(0,0,0,0.6)
}
</style>
</head>
<body>
<div>
<textarea></textarea>
<button>Click</button>
</div>
</body>
</html>

出力結果

このコードを実行すると、次のような結果になります。

CSSの:focus-within疑似クラスの使い方をわかりやすく解説

textareaまたはbuttonにフォーカスすると、親要素であるdivの背景色がlavenderblush（ラベンダーブラッシュ）からaliceblue（アリスブルー）へ変化し、影が表示されます。

:focus-withinを使う際のポイント

  • :focus … フォーカスを受け取った要素自身にのみスタイルが適用されます。
  • :focus-within … 要素自身または子孫要素がフォーカスを持つ場合に、親要素へスタイルを適用できます。
  • フォームやインタラクティブなUIコンポーネントの強調表示、ユーザーの操作範囲を視覚的に示す演出などに幅広く活用できます。
  1. CSSのword-breakプロパティとは？使い方とサンプルコードを解説

    word-breakプロパティは、CSSでテキストの改行（行の折り返し）ルールを制御するためのプロパティです。特に、単語の途中で改行するかどうか、ハイフンや句読点でのみ改行するかどうかなどを指定できます。 word-breakプロパティの主な値 normal：通常の改行ルールに従います（初期値）。日本語や中国語などのCJK文字では任意の位置で改行できますが、欧文の単語途中では改行されません。 break-all：すべての文字の間で改行が可能になります。単語の途中でも強制的に折り返されるため、幅の狭いコンテナに長い英単語を収めたい場合に便利です。 keep-all：CJK言語（日本語・中国語・

  2. CSS疑似要素（::before・::afterなど）の使い方を徹底解説

    CSS疑似要素（Pseudo Elements）とは？ CSSの疑似要素を使うと、要素の「最初の1文字」や「最初の行」など特定の部分だけにスタイルを適用したり、要素の前後に新しいコンテンツを挿入したりできます。装飾のための余計なHTMLを書かずに済むため、マークアップをすっきり保ちながら表現力を高められる便利な機能です。 ポイント： 疑似クラスと疑似要素を区別するため、CSS3以降では疑似要素はコロン2つ（ダブルコロン :: ）の記法で書くのが標準となっています。 基本構文 疑似要素は、対象となるセレクタの後ろにダブルコロンで続けて記述します。 Selector::pseudo-elemen