このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
:focus-within
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2020年1月.
:focus-within はCSS の擬似クラスで、その要素または子孫要素にフォーカスがある場合に一致します。言い換えれば、それ自身が:focus 擬似クラスに該当するか、子孫に:focus に該当する要素がある要素を表します。（これはシャドウツリーにおける子孫も含みます。）
試してみましょう
label { display: block; margin-top: 1em;}label:focus-within { font-weight: bold;}<form> <p>Which flavor would you like to order?</p> <label>Full Name: <input name="firstName" type="text" /></label> <label >Flavor: <select name="flavor"> <option>Cherry</option> <option>Green Tea</option> <option>Moose Tracks</option> <option>Mint Chip</option> </select> </label></form>このセレクターは、よくある例のように、<input> 欄の一つにユーザーがフォーカスを置いたときに、それを含む<form> 全体を強調する場合に便利です。
構文
css
:focus-within { /* ... */}例
この例では、何れかの入力欄にフォーカスが当たった時、特殊な色のスタイルにします。
HTML
html
<p>このフォームに入力してみてください。</p><form> <label for="given_name">名前:</label> <input type="text" /> <br /> <label for="family_name">苗字:</label> <input type="text" /></form>CSS
css
form { border: 1px solid; color: gray; padding: 4px;}form:focus-within { background: #ff8; color: black;}input { margin: 4px;}結果
仕様書
| Specification |
|---|
| Selectors Level 4 # the-focus-within-pseudo |