Pseudo-class :has() của CSS

Định nghĩa và cách sử dụng

CSS :has() Pseudo-class được sử dụng để khớp bất kỳ phần tử cha nào có phần tử anh em hoặc chứa phần tử bên trong đặc định.

Dùng ví dụ:

• Hiện hoặc ẩn phần tử dựa trên phần tử anh em hoặc nội dung bên trong đặc định.
• Thay đổi bố cục nếu có nội dung đặc định.
• Để làm cho phần tử có vẻ khác biệt nếu phần tử cha có phần tử anh em hoặc nội dung bên trong đặc định.

Mẫu

Ví dụ 1

Đặt kiểu cho phần tử <h2> nằm sau phần tử <p>:

h2:has(+ p) {
  color: gray;
  background-color: gold;
  border: 2px dotted red;
}

Thử ngay

Ví dụ 2

Đặt kiểu cho phần tử <section> chứa phần tử <h1> và phần tử <section> chứa phần tử có tên lớp là funfact:

section:has(h1) {
  background-color: gold;
}
section:has(.funfact) {
  color: blue;
}

Thử ngay

Ví dụ 3

Đặt kiểu cho phần tử <li> chứa phần tử <input> được chọn (trong <ul>):

ul li:has(input:checked) {
  border:2px solid maroon;
}

Thử ngay

Ngữ pháp CSS

:has(relative-selector-list) {
  các biểu thức css;
}

Chi tiết kỹ thuật

Hỗ trợ trình duyệt

Số liệu trong bảng chỉ ra phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ pseudo-class.