Pseudo-class focus-within

Pseudo-class focus-within thiết lập kiểu dáng cho các phần tử đang trong trạng thái tiêu điểm. Khác với pseudo-class focus, định dạng trực tiếp cho chính phần tử đó, focus-within thiết lập kiểu dáng cho phần tử cha.

Cú pháp

cssbộ chọn:focus-within {

}

Ví dụ

Hãy thiết lập màu nền xanh da trời cho phần tử cha, khi phần tử con là input đang trong tiêu điểm:

html<div>
  Nhập tên của bạn: <input name="user">
</div>

cssdiv {
  width: 300px;
  height: 50px;
  padding: 10px;
}
div:focus-within {
  background-color: #C2DDFD;
}

Результат:

Xem thêm