×

Chọn phần tử duy nhất của loại thẻ trong cha - :only-of-type - trong CSS

Avatar of admin
admin 0 Views

Trong CSS, việc chọn đúng phần tử để áp dụng các quy tắc là cực kỳ quan trọng để đạt được định dạng và bố cục trang web chính xác. Một trong những pseudo-class hữu ích giúp chúng ta thực hiện điều này là :only-of-type. Để hiểu rõ hơn về cách pseudo-class này hoạt động và cách sử dụng, hãy cùng đi sâu vào chi tiết.

Khái niệm cơ bản

Pseudo-class :only-of-type được dùng để chọn phần tử là phần tử duy nhất của loại thẻ đó trong phần tử cha của nó. Điều này có nghĩa là nếu một phần tử cha chỉ chứa một phần tử con duy nhất thuộc một loại nhất định, thì pseudo-class này sẽ chọn phần tử con đó.

Cú pháp

Cú pháp của :only-of-type rất đơn giản:

selector:only-of-type {
    /* CSS properties */
}

selector ở đây là bất kỳ loại thẻ HTML nào như div, p, span, h1, v.v. Khi kết hợp với :only-of-type, nó sẽ chỉ áp dụng cho phần tử loại thẻ đó mà không có đồng loại (same-type siblings) trong phần tử cha.

Ví dụ cụ thể

Để minh họa cách :only-of-type hoạt động, hãy xem qua ví dụ sau:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Only-of-type Example</title>
    <style>
        p:only-of-type {
            color: red;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div>
        <p>This is a paragraph inside the first div.</p>
    </div>
    <div>
        <p>This is a paragraph inside the second div.</p>
        <p>This paragraph will not be selected because it is not the only p element.</p>
    </div>
    <div>
        <span>This is a span inside the third div.</span>
    </div>
</body>
</html>

Trong ví dụ này, chỉ có đoạn văn (paragraph) trong phần tử div đầu tiên sẽ được chọn bởi pseudo-class :only-of-type vì nó là phần tử loại p duy nhất trong phần tử cha của nó. Đoạn văn trong phần tử div thứ hai không được chọn vì trong đó có nhiều hơn một phần tử loại p.

Ứng dụng thực tế

Việc sử dụng :only-of-type có thể rất có ích trong một số trường hợp cụ thể. Dưới đây là một số tình huống:

  1. Bố cục linh hoạt: Khi bạn muốn áp dụng kiểu dáng đặc biệt cho một phần tử duy nhất trong một ngữ cảnh nhất định mà không ảnh hưởng đến các phần tử khác.

  2. Quản lý nội dung động: Trong các ứng dụng mà nội dung có thể thay đổi động, bạn có thể sử dụng :only-of-type để bảo đảm rằng chỉ phần tử duy nhất của một loại sẽ nhận được một kiểu đặc biệt.

Kết luận

Pseudo-class :only-of-type là một công cụ mạnh mẽ trong CSS giúp bạn kiểm soát và định dạng trang web một cách hiệu quả. Bằng cách sử dụng pseudo-class này, bạn có thể đảm bảo rằng chỉ các phần tử duy nhất theo loại trong phần tử cha sẽ nhận được các kiểu dáng cụ thể, giúp tăng khả năng quản lý và tổ chức CSS của bạn. Hãy thử áp dụng :only-of-type trong dự án của bạn để thấy rõ sự tiện lợi mà nó mang lại.

Comments

Bài viết liên quan