:focus-within
:focus-within
该:focus-withinCSS伪类匹配任何:focus伪类所匹配的元素或后代中有:focus伪类所能匹配的节点的元素。（这包括shadow trees中的后代）
/* Selects any <div> when one of its descendants is focused */
div:focus-within {
background: yellow;
}
举个例子来说，当用户关注于其表单输入之一时，这对于突出显示整个表单容器是有用的。
语法
:focus-within
实例
.name-container {
padding: 4px;
}
.name-container:focus-within {
background: yellow;
}
input {
margin: 4px;
}
<p>The div below will have a yellow background if
either input inside is focused.</p>
<div class="name-container">
<label for="given_name">
Given Name:
<input id="given_name" type="text">
</label>
<label for="family_name">
Family Name:
<input id="family_name" type="text">
</label>
</div>
规范
| Specification | Status | Comment |
|---|---|---|
| Selectors Level 4The definition of ':focus-within' in that specification. | Working Draft | Initial definition. |
浏览器兼容性
| Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| Basic support | 601 | No support2 | 52.0 (52.0)3 | No support | 47 | 10.1 |
| Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | 601 | 52.0 (52.0)3 | No support | 47 | 10.3 |
