このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
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> <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 |