There was a scripting error on this page. While it is being addressed by site editors, you can view partial content below.

Bản dịch này chưa hoàn thành. Xin hãy giúp dịch bài viết này từ tiếng Anh.

{{CSSRef}}

Lớp giả CSS :focus-within đại diện cho thành phần nhận focus hoặc chứa một thành phần nhận focus. Nói cách khác, nó đại diện cho một thành phần mà chính nó khớp bởi một lớp giả {{cssxref(":focus")}} hoặc có một hậu duệ (con cháu) được khớp bởi :focus. (Gồm cả hậu duệ trong shadow trees.)

/* Chọn một <div> khi hậu duệ của nó được focus */
div:focus-within {
  background: cyan;
}

Nó rất hữu dụng, ví dụ chung, để làm nổi bật toàn bộ container {{htmlElement("form")}} khi người dùng focus vào một trong các field {{htmlElement("input")}} của nó.

Cú pháp

{{csssyntax}}

Ví dụ

 

Trong ví dụ này, form sẽ nhận kiểu màu đặc biệt khi text input nhận focus.

 

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

{{EmbedLiveSample("Example", 500, 150)}}

Chi tiết

Chi tiết Tình trạng Comment
{{SpecName("CSS4 Selectors", "#the-focus-within-pseudo", ":focus-within")}} {{Spec2("CSS4 Selectors")}} Initial definition.

Tương thích Trình duyệt

{{Bảng tương thích}}

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support {{CompatChrome("60")}} {{CompatNo}}[1] {{CompatGeckoDesktop("52.0")}}[2] {{CompatNo}} {{CompatOpera("47")}} 10.1
Feature Android Webview Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support {{CompatChrome("60")}} {{CompatChrome("60")}} {{CompatGeckoMobile("52.0")}}[2] {{CompatNo}} {{CompatOpera("47")}} 10.3

[1] Tính năng này chưa được bổ sung. Xem yêu cầu nâng cao có liên quan.

[2] Tính năng đã được bổ sung trong {{bug("1176997")}}.

Xem cả

  • {{cssxref(":focus")}}

Document Tags and Contributors

 Những người đóng góp cho trang này: Sainojin
 Cập nhật lần cuối bởi: Sainojin,