はじめに
みなさんは、兄弟要素の位置や合計数に基づいたスタイルにしたいとおもったことはあるでしょうか？
- 兄弟要素の順番に応じて、WidhtやColorを変更したい
- 兄弟要素の合計数に応じて、WidhtやColorを調整したい
実は、Chrome138 から、兄弟要素の位置や合計数に基づいたスタイルにできる関数 sibling-index() と sibling-count() が使えるようになりました。
そのため、この記事は sibling-index() と sibling-count() の使い方を紹介します。
sibling-index() とは？
sibling-index()は、兄弟要素の中で何番目かを取得できる CSS 関数です。
indexは、1から始まります。
.sample {
width: calc(75px * sibling-index());
}
See the Pen sibling-index() by degudegu2510 | Qiita (@degudegu2510) on CodePen.
サンプル：兄弟要素の順番に応じて色を変えたい。
こんな感じにグラデーションを表現するのが簡単になっています。
See the Pen sibling-index() by degudegu2510 | Qiita (@degudegu2510) on CodePen.
sibling-count() とは？
sibling-count() は、兄弟要素の合計数が取得できる CSS 関数です。
.sample {
width: calc(100% / sibling-count());
}
See the Pen sibling-index() by degudegu2510 | Qiita (@degudegu2510) on CodePen.
サンプル：アニメーションディレイを要素数で変える
See the Pen sibling-count() - animation by degudegu2510 | Qiita (@degudegu2510) on CodePen.
まとめ
この記事では、兄弟要素の位置や合計数に基づいたスタイルを作れる sibling-index() と sibling-count() を紹介しました。
sibling-index() と sibling-count() でさらに、CSSだけでリッチなロジックが書ける時代がどんどん近づいてきているようにかんじます。
最後まで読んでくださってありがとうございます！
普段はデザインやフロントエンドを中心にQiitaに記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。