Khám phá bộ chọn CSS nâng cao cho thiết kế web hiện đại

Cùng tìm hiểu thế giới bộ chọn CSS nâng cao như :is(), :where(), :not() và :has(). Những bộ chọn này là công cụ mạnh mẽ để tạo CSS hiệu quả và linh hoạt hơn cho thiết kế web hiện đại.

Bộ chọn :is()

Hàm giả lớp :is() cho phép bạn áp dụng kiểu cho nhiều bộ chọn mà không cần lặp lại các thuộc tính giống nhau. Nó đặc biệt hữu ích để nhóm các bộ chọn có độ đặc hiệu khác nhau.

VD:

<div class="alert success">Success message</div>
<div class="alert error">Error message</div>
<div class="alert warning">Warning message</div>

:is(.alert.success, .alert.error, .alert.warning) {
    font-weight: bold;
    border: 1px solid;
    border-radius: 4px;
}

.alert.success { border-color: green; }
.alert.error { border-color: red; }
.alert.warning { border-color: orange; }

Kết quả: Tất cả các loại cảnh báo đều có phông chữ đậm và viền, với màu được xác định bởi lớp cụ thể của chúng.

Bộ chọn :where()

Tương tự như :is(), :where() nhóm các bộ chọn, nhưng nó có độ đặc hiệu bằng 0. Điều này làm cho nó trở nên lý tưởng để tạo các kiểu dễ ghi đè.

VD:

<button class="primary">Primary Action</button>
<input type="button" value="Secondary Action">
<input type="submit" value="Submit Form">

/* Button styles with low specificity */
:where(button, input[type="button"], input[type="submit"]) {
    font-size: 1rem;
    padding: 0.5em 1em;
    background-color: #f0f0f0;
    border: none;
    cursor: pointer;
}

/* Specific override for primary buttons */
button.primary {
    background-color: #007BFF;
    color: white;
}

Kết quả:

Bộ chọn :not()

Giả lớp :not() được sử dụng để loại trừ các phần tử nhất định khỏi lựa chọn. Nó rất tốt để áp dụng kiểu cho mọi thứ trừ một phần tử hoặc lớp cụ thể.

VD:

<ul>
    <li class="done">Completed Task</li>
    <li>To Do</li>
    <li>Another Task</li>
</ul>

/* Style all list items except those marked as 'done' */
li:not(.done) {
    background-color: #f0f0f0;
}

/* Darken the text for completed items */
li.done {
    color: #888;
}

Kết quả:

Bộ chọn :has()

Giả lớp :has() cho phép bạn tạo kiểu cho một phần tử dựa trên những gì nó chứa. Bộ chọn này rất mạnh mẽ nhưng hỗ trợ trình duyệt còn hạn chế tại thời điểm viết bài.

VD:

<section>
    <h2>Video Section</h2>
    <video src="movie.mp4" controls></video>
    <img src="thumbnail.jpg" alt="Video Thumbnail">
</section>
<section>
    <h2>Text Only Section</h2>
    <p>Here's some text content without any media.</p>
</section>

/* Style sections containing a video to have a dark background */
section:has(video) {
    background-color: #1a1a1a;
}

/* Make images inside sections with videos a little darker */
section:has(video) img {
    filter: brightness(0.8);
}

Kết quả:

Hỗ trợ trình duyệt

• :is() và :where(): Các trình duyệt hiện đại thường hỗ trợ chúng nhưng hãy luôn kiểm tra dữ liệu tương thích mới nhất.
• :not(): Được hỗ trợ rộng rãi nhưng các bộ chọn phức tạp bên trong :not() có thể không hoạt động trong các trình duyệt cũ.
• :has(): Hạn chế ở các phiên bản Safari gần đây với hỗ trợ thử nghiệm trong các trình duyệt khác. Hãy sử dụng thận trọng hoặc sử dụng polyfill để có khả năng tương thích rộng hơn.

Cân nhắc về tính đặc hiệu

• :is() và :where() kế thừa độ đặc hiệu cao nhất từ các bộ chọn mà chúng chứa, với :where() có độ đặc hiệu bằng không.
• Độ đặc hiệu của :not() là độ đặc hiệu của bộ chọn mà nó chứa.
• :has() có thể dẫn đến các vấn đề đặc hiệu phức tạp vì nó phụ thuộc vào các bộ chọn bên trong nó nhưng nó không trực tiếp thêm vào điểm đặc hiệu.

Ứng dụng thực tế

• Tạo kiểu cho các thành phần: Sử dụng :is() và :where() cho các kiểu chung trên các lớp nút hoặc phần tử biểu mẫu khác nhau.
• Bố cục linh hoạt: :has() có thể được sử dụng cho các bố cục thích ứng, nơi sự hiện diện của các phần tử nhất định thay đổi kiểu dáng của phần tử cha.
• Thiết kế đáp ứng: Kết hợp các bộ chọn này với media query để có thiết kế linh hoạt và theo ngữ cảnh hơn nữa.

Kết Luận

Bộ chọn CSS nâng cao có thể sắp xếp hợp lý các bảng kiểu của bạn, làm cho chúng gọn gàng và hiệu quả hơn. Hãy chú ý đến hỗ trợ trình duyệt, đặc biệt là đối với :has(), và sử dụng các bộ chọn này một cách khôn ngoan để nâng cao CSS của bạn mà không ảnh hưởng đến khả năng bảo trì.