先看這個例子
fieldset 內有兩個有標籤文字欄，外面另有一欄。focus-within 改整組邊框，輸入框自己的焦點提示仍保留。
| 情況 | 輸入或查看方法 | 結果與意思 |
|---|---|---|
| 標題焦點 | 焦點到 title | 整組符合 :focus-within；綠色 |
| 摘要焦點 | 焦點到 summary | 整組仍符合；綠色 |
| 組外焦點 | 焦點到 outside | 整組不再符合；灰色 |
瀏覽器怎樣處理
:focus-within 在元素自己或相關後代有焦點時配對；:focus 是另一條件。本例教選擇器機制，不取代既有完整鍵盤操作驗收。
容器 :focus 不會自動跟子欄位焦點
反例把同一 fieldset 的 focus-within 改成 focus。
<style>body{margin:8px}</style>
<style>fieldset{border:3px solid rgb(140,140,140)}fieldset:focus{border-color:rgb(0,80,40)}</style><fieldset><legend>工作坊筆記</legend><label>標題 <input id="title" type="text"></label></fieldset>焦點在標題欄，不是 fieldset 自己，整組仍灰色。
試着修正
整組邊框變綠，是否可取代真正控制項的可見焦點？
查看參考答案
不能，只識別整組，不指出確切控制項。輸入框焦點須另保留和測試。
- 三欄都查 activeElement 和組邊框。
- 原生標籤及焦點提示保留。