I. Tại sao chúng ta cần :where() và :is()?

Trước khi có những pseudo-classes này, để áp dụng kiểu cho nhiều selector, chúng ta thường phải sử dụng một danh sách dài các selector, đôi khi dẫn đến mã CSS dài và khó đọc. Cùng xem xét một ví dụ:

h1, h2, h3, h4, h5, h6 {
  color: blue;
}

Trong trường hợp này, chúng ta muốn áp dụng màu xanh cho tất cả các phần tử tiêu đề từ h1 đến h6. Tuy nhiên, khi cần loại bỏ một số phần tử khỏi danh sách, chúng ta phải lặp lại toàn bộ danh sách và loại bỏ chúng:

h1, h2, h3, h5, h6 {
  color: blue;
}

Với :where() và :is(), chúng ta có cách tiếp cận mới giúp giảm sự lặp lại và làm cho mã CSS trở nên sáng sủa hơn.

II. Sử Dụng :where() và :is()

1. Sử dụng :where()

Cú pháp của :where() rất đơn giản. Nó cho phép bạn nhóm các selector lại một cách hiệu quả mà không cần phải lặp lại toàn bộ danh sách:

:where(h1, h2, h3, h4, h5, h6) {
  color: blue;
}

Câu lệnh trên sẽ có kết quả giống như ví dụ đầu tiên, áp dụng màu xanh cho tất cả các phần tử tiêu đề từ h1 đến h6

2. Sử dụng :is()

Tương tự như :where(), :is() cung cấp một cách khác để nhóm các selector:

:is(h1, h2, h3, h4, h5, h6) {
  color: blue;
}

Cả hai cách tiếp cận đều tạo ra kết quả tương tự và giúp bạn làm cho mã CSS ngắn gọn hơn và dễ đọc hơn.

III. Ưu điểm và Lưu ý

1. Ngắn Gọn và Dễ Đọc:

Cả :where() và :is() giúp giảm sự lặp lại trong mã CSS, làm cho nó trở nên ngắn gọn và dễ đọc hơn.

2. Tích hợp Dễ Dàng:

Cả hai pseudo-classes này tích hợp tốt với các selector khác, giúp bạn duy trì tính tương thích và tính linh hoạt trong mã nguồn của mình.

3. Dễ Bảo Trì:

Khi cần thêm hoặc loại bỏ các selector, bạn chỉ cần thực hiện thay đổi ở một địa điểm duy nhất, giúp dễ bảo trì hơn.

4. Trình duyệt hỗ trợ:

:where()

:is()

IV. Kết Luận

Sử dụng :where() và :is() trong CSS selector mang lại những lợi ích đáng kể về sự ngắn gọn và dễ đọc. Đặc biệt, chúng là một công cụ hữu ích khi bạn cần áp dụng kiểu cho nhiều phần tử cùng loại một cách linh hoạt. Hãy tích hợp chúng vào công cụ lập trình CSS của bạn để trải nghiệm sự tiện lợi mà chúng mang lại.

The post Sử dụng :where() và :is() trong CSS Selector – Ngắn gọn và mạnh mẽ appeared first on Tomoshare.

I. Giới Thiệu về :has()

:has() là một pseudo-class mới trong CSS, cho phép bạn chọn các phần tử cha dựa trên nội dung của các phần tử con bên trong chúng. Cú pháp cơ bản như sau:

parent:has(child) {
  /* CSS styles */ 
}

Với :has(), bạn có thể áp dụng kiểu cho các phần tử cha chứa một hoặc nhiều phần tử con cụ thể, làm cho việc chọn lựa và định dạng trang web trở nên linh hoạt hơn.

II. Sử Dụng Cú Pháp :has()

1. Chọn Parent Có Phần Tử Con Cụ Thể

div:has(p) {
  background-color: #f0f0f0;
}

Trong trường hợp này, tất cả các div chứa ít nhất một phần tử p sẽ có nền màu xám nhạt.

2. Kết Hợp Nhiều Phần Tử Con

article:has(h2, p) {
  border: 1px solid #ccc;
}

Câu lệnh trên sẽ chọn tất cả các phần tử article chứa ít nhất một phần tử h2 hoặc p và áp dụng đường viền xám nhạt.

3. Sử Dụng Nested :has()

section:has(article:has(h2)) {
  margin: 10px;
}

Trong trường hợp này, section sẽ được chọn nếu nó chứa ít nhất một article có chứa ít nhất một phần tử h2.

III. Ưu Điểm và Hạn Chế

1. Ưu Điểm của :has()

• Linh Hoạt: Cho phép bạn chọn các phần tử cha dựa trên nội dung của phần tử con, mang lại sự linh hoạt cao khi định dạng trang web.
• Dễ Đọc: Làm cho mã CSS trở nên rõ ràng hơn, giảm sự phức tạp của selector.

2. Hạn Chế và Lưu ý

• Hạn Chế Sự Linh Hoạt: Mặc dù mạnh mẽ, nhưng :has() có thể hạn chế sự linh hoạt khi so sánh với một số phương pháp khác như JavaScript.
• Hỗ Trợ Trình Duyệt: Hiện tại, :has() chưa được hỗ trợ rộng rãi, vì vậy hãy kiểm tra hỗ trợ trình duyệt trước khi sử dụng.

3. Trình duyệt hỗ trợ

IV. Kết Luận

Pseudo-class :has() mang lại một cách tiếp cận mới và thú vị cho việc chọn các phần tử cha dựa trên nội dung của phần tử con trong CSS. Tuy nhiên, đối với sự hỗ trợ và linh hoạt, cân nhắc kết hợp :has() với các phương pháp khác để đảm bảo tính ổn định và tương thích trình duyệt. Hãy thử nghiệm và tận dụng sức mạnh của :has() để tối ưu hóa mã CSS của bạn.

The post Khám Phá CSS Parent Selector :has() appeared first on Tomoshare.