sibling-count()
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Hàm sibling-count() trong CSS là một hàm trả về một số nguyên đại diện cho tổng số phần tử DOM anh em (con trực tiếp của cha) của phần tử mà nó được sử dụng, bao gồm chính nó.
Note:
Hàm counter() cung cấp kết quả tương tự nhưng trả về <string> (phù hợp hơn cho nội dung được tạo), trong khi sibling-count() trả về <integer> (có thể dùng cho các phép tính).
Cú pháp
sibling-count()
Tham số
Hàm sibling-count() không chấp nhận tham số.
Giá trị trả về
Một số nguyên; tổng số phần tử DOM anh em bao gồm chính phần tử đó.
Ví dụ
Số cột động
Ví dụ này minh họa cách đặt chiều rộng của mỗi mục trong danh sách dựa trên số lượng mục, cho phép đặt mỗi con trong cột riêng của nó.
HTML
Chúng ta bao gồm một vùng chứa <ul> và một số phần tử con <li>.
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul>
CSS
Chúng ta chia width của mỗi mục danh sách cho số lượng con trực tiếp mà danh sách chứa. Chúng ta cũng đặt mỗi phần tử lẻ có background-color để minh họa rõ hơn hiệu ứng kết quả.
ul {
list-style-type: none;
padding: 0;
margin: 0;
text-align: center;
display: flex;
}
li {
width: calc(100% / sibling-count());
}
li:nth-of-type(odd) {
background-color: rgb(0 0 0 / 0.05);
}
Kết quả
Thông số kỹ thuật
| Specification |
|---|
| CSS Values and Units Module Level 5 # funcdef-sibling-count |