Bộ :focus-withinchọn giả trong CSS hơi khác thường, mặc dù được đặt tên tốt và khá trực quan. Nó chọn một phần tử nếu phần tử đó chứa bất kỳ phần tử con nào có :focus.
form:focus-within ( background: lightyellow; )Cái nào hoạt động như thế này…
Tôi đã nói "không bình thường" vì không phổ biến trong CSS để có thể chọn một phần tử mẹ dựa trên sự tồn tại hoặc trạng thái của các phần tử con. Chắc chắn là hữu ích mặc dù!
Đây là một mẫu ví dụ để thử:
Xem Biểu mẫu phản hồi đơn giản bằng bút với: focus-inside của Chris Coyier (@chriscoyier) trên CodePen.
Lưu ý rằng ví dụ sử dụng :focus-withintrên toàn bộ biểu mẫu và trên gói đầu vào bên trong
Bất kỳ cách nào mà một phần tử con có thể trở thành tiêu điểm sẽ kích hoạt: focus-inside. Ví dụ: nếu một phần tử có một tab-indexhoặc contenteditablethuộc tính, thì nó là một phần tử có thể lấy tiêu điểm và sẽ hoạt động. Nó cũng không quan trọng bằng cách nào yếu tố trở nên tập trung. Nó có thể được nhấp hoặc chạm, nó có thể được gắn thẻ hoặc điều hướng đến bằng một số phương tiện khác, hoặc thậm chí tập trung thông qua JavaScript, như…
document.querySelector("input").focus();Hỗ trợ trình duyệt
Dữ liệu hỗ trợ trình duyệt này là từ Caniuse, có nhiều chi tiết hơn. Một con số cho biết rằng trình duyệt hỗ trợ tính năng ở phiên bản đó trở lên.
Máy tính để bàn
| Trình duyệt Chrome | Firefox | I E | Cạnh | Safari |
|---|---|---|---|---|
| 60 | 52 | Không | 79 | 10.1 |
Di động / Máy tính bảng
| Chrome dành cho Android | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 10.3 |