: only-of-type - Thủ thuật CSS

Bộ :only-of-typechọn lớp giả trong CSS đại diện cho bất kỳ phần tử nào không có anh chị em của loại đã cho.

p:only-of-type ( color: red; )

Nếu không có thẻ nào đứng trước bộ chọn, nó sẽ khớp với bất kỳ thẻ nào (ví dụ :only-of-type). Nếu một bộ chọn khác đứng trước nó, nó sẽ khớp dựa trên loại thẻ mà bộ chọn phù hợp. Ví dụ .example:only-of-typesẽ hoạt động giống như p:only-of-typeif .exampleđược áp dụng cho một phần tử đoạn văn.

Ví dụ đơn giản

Một danh sách chỉ chứa một mục danh sách. Một danh sách khác chứa ba mục danh sách. Chúng tôi có thể nhắm mục tiêu mục danh sách chỉ có một mình :only-of-type.

Kiểm tra cây bút này!

Mặc dù có lẽ đó không phải là ví dụ tốt nhất, bởi vì :only-childnó sẽ hoạt động tốt ở đó vì các mục danh sách là con duy nhất có thể có của danh sách. Nếu chúng ta sử dụng div thay thế, chúng ta có thể nhắm mục tiêu một đoạn bên trong div nếu đó là đoạn duy nhất, mặc dù các phần tử khác cũng nằm trong đó.

Kiểm tra cây bút này!

Cần lưu ý

Như một niềm vui sang một bên, bạn có thể đạt được lựa chọn tương tự như :only-of-typevới :first-of-type:last-of-typehoặc :nth-of-type(1):nth-last-of-type(1). Tuy nhiên, chúng sử dụng hai bộ chọn chuỗi, có nghĩa là độ đặc hiệu gấp đôi :only-of-type.