:focus-within

 :focus-within 是一个CSS 伪类 ，表示一个元素获得焦点，或，该元素的后代元素获得焦点。换句话说，元素自身或者它的某个后代匹配:focus伪类。（在shadow trees 中的后代也在匹配序列中）

/* 匹配<div>，当它的某个后代获得焦点 */
div:focus-within {
  background: cyan;
}

该选择器非常有用，举个通俗的例子：当用户在表单中某个<input> 域上获得焦点，会高亮整个表单。

语法

:focus-within

Example

例子中，当表单某个文本输入框获得焦点后，表单会被设置颜色样式。

HTML

<p>Try typing into this form.</p>

<form>
  <label for="given_name">Given Name:</label>
  <input id="given_name" type="text">
  <br>
  <label for="family_name">Family Name:</label>
  <input id="family_name" type="text">
</form>

CSS

form {
  border: 1px solid;
  color: gray;
  padding: 4px;
}

form:focus-within {
  background: #ff8;
  color: black;
}

input {
  margin: 4px;
}

Result

规范

浏览器兼容性

参见

• :focus