Này tất cả các nhà phát triển tuyệt vời ngoài kia! Trong bài viết này chúng ta sẽ tìm hiểu việc sử dụng :has() trong dự án web tiếp theo của bạn. :has() tương đối mới nhưng đã trở nên phổ biến trong cộng đồng giao diện người dùng bằng cách cung cấp quyền kiểm soát các thành phần khác nhau trong giao diện người dùng của bạn. Chúng ta hãy xem lớp giả là gì và chúng ta có thể sử dụng nó như thế nào.

cú pháp

Sản phẩm :has() Lớp giả CSS giúp tạo kiểu cho một phần tử nếu bất kỳ thứ nào chúng ta đang tìm kiếm bên trong nó được tìm thấy và tính đến. Nó giống như nói, “Nếu có thứ gì đó cụ thể bên trong hộp này, thì hãy tạo kiểu cho hộp theo cách này VÀ chỉ theo cách này.”

:has(<direct-selector>) {
  /* ... */
}

Vấn đề về kiểu dáng

Trong những năm trước, chúng tôi không có cách nào để tạo kiểu cho phần tử gốc dựa trên phần tử con trực tiếp của phần tử gốc đó bằng CSS hoặc phần tử dựa trên phần tử khác. Trong trường hợp phải làm điều đó, chúng tôi sẽ cần sử dụng một số JavaScript và bật/tắt các lớp dựa trên cấu trúc của HTML. :has() đã giải quyết được vấn đề đó

Giả sử bạn có phần tử tiêu đề cấp 1 (h1) đó là tiêu đề của một bài đăng hoặc nội dung nào đó thuộc loại đó trên trang danh sách blog và sau đó bạn có tiêu đề cấp 2 (h2) trực tiếp theo sau nó. H2 này có thể là một tiêu đề phụ cho bài viết. Nếu đó h2 hiện diện, quan trọng và trực tiếp sau h1, bạn có thể muốn làm nổi bật h1 đó. Trước đây bạn phải viết một hàm JS.

Cách học cũ – JavaScript

const h1Elements = document.querySelectorAll('h1');

h1Elements.forEach((h1) => {
  const h2Sibling = h1.nextElementSibling;
  if (h2Sibling && h2Sibling.tagName.toLowerCase() === 'h2') {
    h1.classList.add('highlight-content');
  }
});

Hàm JS này đang tìm kiếm tất cả các h1 có h2 tiến hành nó và áp dụng một lớp nội dung nổi bật để làm cho h1 nổi bật như một bài viết quan trọng.

Mới và được cải tiến với CSS hiện đại sắp ra mắt! Khả năng của những gì chúng ta có thể làm trong trình duyệt đã đi được một chặng đường dài. Bây giờ chúng ta có thể tận dụng CSS để thực hiện những việc mà theo truyền thống chúng ta sẽ phải làm với JavaScript, không phải mọi thứ mà là một số thứ.

Con Đường Mới – CSS

h1:has(+ h2) {
    color: blue;
}

Hãy ném một số :has() vào đó!

Bây giờ bạn có thể sử dụng :has() để đạt được điều tương tự như hàm JS đã làm. CSS này đang kiểm tra mọi h1 và sử dụng tổ hợp anh chị em kiểm tra h2 ngay sau nó và thêm màu xanh lam vào văn bản. Dưới đây là một vài trường hợp sử dụng khi :has() có thể có ích.

:has Ví dụ về bộ chọn 1

HTML

<h1>Lorem, ipsum dolor.</h1>
	<h2>Lorem ipsum dolor sit amet.</h2>
	<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eius, odio voluptatibus est vero iste ad?</p>
	
	<h1>Lorem, ipsum dolor.</h1>
	<h2>Lorem ipsum dolor sit amet.</h2>
	<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eius, odio voluptatibus est vero iste ad?</p>

	<h1>This is a test</h1>
	<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eius, odio voluptatibus est vero iste ad?</p>

CSS

h1:has(+ h2) {
    color: blue;
}

:has Ví dụ về bộ chọn 2

Rất nhiều lần chúng ta, với tư cách là những người làm việc trên web, đang thao tác hoặc làm việc với hình ảnh. Chúng ta có thể sử dụng các công cụ Đám mây cung cấp cách sử dụng các phép biến đổi khác nhau trên hình ảnh của chúng tôi, nhưng thông thường chúng tôi muốn thêm bóng đổ, bán kính đường viền và chú thích (đừng nhầm lẫn với văn bản thay thế trong thuộc tính alt).

Ví dụ dưới đây đang sử dụng :has() để xem liệu một hình hoặc hình ảnh có phần tử figcaption hay không và nếu có, nó sẽ áp dụng một số nền và bán kính đường viền để làm cho hình ảnh nổi bật.

HTML

<section>
	<figure>
		<img src="https://placedog.net/500/280" alt="My aunt sally's dog is a golden retreiver." />
		<figcaption>My Aunt Sally's Doggo</figcaption>
	</figure>
</section>

CSS

figure:has(figcaption) {
  background: #c3baba;
  padding: 0.6rem;
  max-width: 50%;
  border-radius: 5px;
}

Tôi có thể :has() cái đó?

Bạn có thể thấy rằng :has() có sự hỗ trợ tuyệt vời trên các trình duyệt hiện đại.

:has() trong cộng đồng!

Tôi đã liên hệ với mạng của mình trên Twitter để xem các đồng nghiệp của tôi đang sử dụng như thế nào :has() trong công việc hàng ngày của họ và đây là những gì họ phải nói về nó.

svg:has(> #Mail) {
  stroke-width: 1;
}

Thật tuyệt vời khi thấy các thành viên cộng đồng đang sử dụng CSS hiện đại để giải quyết các vấn đề trong thế giới thực và cũng là lời cảm ơn Abbey khi sử dụng nó vì lý do khả năng tiếp cận!

Những điều cần lưu ý

Một số điểm chính cần lưu ý khi sử dụng :has() Điểm đầu dòng được tham chiếu từ MDN.

• Lớp giả đảm nhận tính đặc hiệu của bộ chọn cụ thể nhất trong đối số của nó
• Nếu :has() Bản thân lớp giả không được hỗ trợ trong trình duyệt, toàn bộ khối bộ chọn sẽ thất bại trừ khi :has() nằm trong danh sách lựa chọn có thể tha thứ, chẳng hạn như trong :is() và :where()
• Sản phẩm :has() lớp giả không thể được lồng trong lớp khác :has() 
• Các phần tử giả cũng không phải là bộ chọn hợp lệ trong :has() và các phần tử giả không phải là điểm neo hợp lệ cho :has()

Kết luận

Khai thác sức mạnh của CSS, bao gồm các tính năng nâng cao như :has() lớp giả, cho phép chúng tôi tạo ra những trải nghiệm web đặc biệt. Điểm mạnh của CSS nằm ở tính phân tầng và tính đặc hiệu của nó…phần tốt nhất, cho phép chúng tôi phát huy hết tiềm năng của nó. Bằng cách tận dụng các khả năng của CSS, chúng tôi có thể thúc đẩy quá trình thiết kế và phát triển web, mở khóa các khả năng mới và tạo ra các giao diện người dùng đột phá.

Liên kết:

• Phân phối nội dung và PR được hỗ trợ bởi SEO. Được khuếch đại ngay hôm nay.
• PlatoData.Network Vertical Generative Ai. Trao quyền cho chính mình. Truy cập Tại đây.
• PlatoAiStream. Thông minh Web3. Kiến thức khuếch đại. Truy cập Tại đây.
• Trung tâmESG. Than đá, công nghệ sạch, Năng lượng, Môi trường Hệ mặt trời, Quản lý chất thải. Truy cập Tại đây.
• PlatoSức khỏe. Tình báo thử nghiệm lâm sàng và công nghệ sinh học. Truy cập Tại đây.
• nguồn: https://css-tricks.com/the-power-of-has-in-css/