CSS - sibling-index(), sibling-count()

• トップ
• CSSリファレンス
• sibling-index(), sibling-count()

概要

説明

sibling-index() は兄弟要素における該当要素のインデックス(1～)、sibling-count() は兄弟要素の総数を返します。

使用例

下記の例では要素の数に応じて、最終要素の透明度が 50% になるようにグラデーションの変動割合を自動制御しています。

.my-style > div {
  background-color: rgb(0, 0, 0, calc(50% * sibling-index() / sibling-count()));
}

<div class="my-style">
  <div>AAA</div>
  <div>AAA</div>
  <div>AAA</div>
  <div>AAA</div>
  <div>AAA</div>
</div>

リンク

https://drafts.csswg.org/css-values-5/#tree-counting
• https://caniuse.com/mdn-css_types_sibling-index