sibling-index()
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。
sibling-index() は CSS の関数で、 DOM ツリー内におけるすべての兄弟要素に対する、現在の要素の相対的な位置を表す整数を返します。返される値は、親要素内のすべての兄弟要素の中で、コンテキストの子要素の位置のインデックス番号です。最初の子は 1、最後の子は Element.children の length を返します。
メモ:
:nth-child() 擬似クラスと同様に、sibling-index() は 0 からではなく 1 から始まります。
試してみましょう
--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%
);
}
構文
sibling-index()
引数
sibling-index() 関数は引数を取りません。
返値
整数。 DOM ツリー内の現在の要素の兄弟要素の順番における位置です。
例
動的なリストの幅
この例では、<ul> 内のそれぞれの <li> アイテムの幅を 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;
}
結果
連続アニメーション
sibling-index() を CSS アニメーションと組み合わせることで、新しい可能性が開かれます。この例では、DOM 内の順序に基づいて animation-delay を設定することで、連続する要素の不透明度を変化させています。
HTML
コンテナー要素と、 4 つの子要素を設置します。
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
CSS
それぞれの要素に fade-in アニメーションを適用します。 calc() 関数内で sibling-index() 関数を使用して、ソース要素のソース順の位置に基づいて animation-delay の再生時間を設定します。 animation-fill-mode は、animation-duration が切れるまで、アニメーションの 0% キーフレームを適用します。
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;
}
}
結果
仕様書
| Specification |
|---|
| CSS Values and Units Module Level 5 # funcdef-sibling-index |
ブラウザーの互換性
Loading…