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 |