sibling-index()
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Hàm sibling-index() trong CSS là một hàm trả về một số nguyên đại diện cho vị trí của phần tử hiện tại trong cây DOM so với tất cả các phần tử anh em của nó. Giá trị trả về là số chỉ mục vị trí của con theo ngữ cảnh trong tất cả các phần tử anh em trong một phần tử cha, với con đầu tiên trả về 1 và con cuối cùng trả về length của Element.children.
Note:
Giống như lớp giả :nth-child(), sibling-index() bắt đầu từ 1, không phải 0.
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-index() trả về <integer> (có thể dùng cho các phép tính).
Try it
--width: calc(sibling-index() * 30px);
--width: calc(sibling-index() * 20px);
--width: calc(sibling-index() * 10px);
--width: 100px;
<ul id="example-element">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
#example-element {
list-style-type: none;
padding: 0;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
}
#example-element > li {
text-align: center;
padding: 2px;
border-radius: 8px;
width: var(--width, calc(sibling-index() * 30px));
color: white;
background-color: hsl(
calc(360deg / sibling-count() * sibling-index()) 50% 50%
);
}
Cú pháp
sibling-index()
Tham số
Hàm sibling-index() không chấp nhận tham số.
Giá trị trả về
Một số nguyên; vị trí của phần tử hiện tại trong thứ tự anh em của cây DOM.
Ví dụ
Chiều rộng danh sách động
Ví dụ này minh họa cách tăng động chiều rộng của mỗi mục <li> trong <ul> lên 50px.
HTML
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
CSS
li {
width: calc(sibling-index() * 50px);
background-color: #ffaaaa;
}
Kết quả
Hoạt hình tuần tự
Kết hợp sibling-index() với hoạt hình CSS mở ra những khả năng mới. Trong ví dụ này, độ mờ của các phần tử theo thứ tự tuần tự được đặt bằng cách thiết lập animation-delay dựa trên thứ tự của chúng trong DOM.
HTML
Chúng ta bao gồm một phần tử container với bốn con:
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
CSS
Chúng ta áp dụng hoạt hình fade-in cho mỗi phần tử. Chúng ta sử dụng hàm sibling-index() trong hàm calc() để đặt thời lượng của animation-delay dựa trên vị trí của phần tử nguồn trong thứ tự nguồn. animation-fill-mode áp dụng keyframe 0% của hoạt hình cho đến khi animation-duration hết hạn.
ul {
list-style-type: none;
padding: 0;
margin: 0;
}
li {
animation-name: fade-in;
animation-duration: 1s;
animation-iteration-count: 1;
animation-timing-function: linear;
animation-fill-mode: backwards;
animation-delay: calc(1s * sibling-index());
}
@keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
Kết quả
Thông số kỹ thuật
| Specification |
|---|
| CSS Values and Units Module Level 5 # funcdef-sibling-index |