sibling-*()を使ってみた

公開日: 2025/08/17

カテゴリ: CSS

Chrome138で追加されたsibling-index()とsibling-count()を使ってみました。

どんな機能？

兄弟要素の数を取得するCSS関数です。

sibling-index()は兄弟要素の位置(1始まり)
sibling-count()は兄弟要素の合計値

sibling-*()は、兄弟要素の数や位置をプロパティの値に使用する場合に使います。プロパティの値が単位なし数値の場合はsibling-*()単体で使用できます。もちろんcalc()関数内で使うことができるので、計算式の項として使用することで様々なことに応用できます。

逆に単純にn番目の要素やnの倍数の要素に対してスタイルする場合は、これまで通り:nth-child()擬似クラスでスタイルした方が良さそうです。

いろいろ使ってみる

とりあえずいろいろ使ってみたサンプルです。HTMLはすべて以下の構成です。今回は子要素が10個ですが、何個であっても動きます。

.container > div * 10

見た目をわかりやすくするため、特に断りがない限り以下のスタイルが適用されています(本編には直接関係しません)。

.container {
	counter-reset: num 0;
	&>div {
		min-width: 30px;
		border: 1px solid #aaa;
		text-align: center;
		&::before {
			counter-increment: num 1;
			content: counter(num);
		}
	}
}

グラデーション

sibling-*()のサンプルとしてよく使われる使用例です。

.container {
	display: flex;
	&>div {
		background-color: rgb(calc(sibling-index() * 255 / sibling-count()), calc(sibling-index() * 255 / sibling-count()), 255);
	}
}

色はRGB以外でも使えるので、HSLなどで(実用性はさておき)色相を変化させることも可能です。

.container {
	display: flex;
	&>div {
		background-color: hsl(calc(sibling-index() * 360 / sibling-count() * 1deg) 100% 50%);
	}
}

段組み風のGridレイアウト

grid-columnやgrid-rowの値に使用することで、計算で自由にレイアウトを組むことができます。例えば以下のような擬似的な段組レイアウトにすることができます。

.container {
	--column: 3;
	display: grid;
	grid-template-columns: repeat(var(--column), 1fr);
	grid-auto-flow: column;
	&>div {
		--div: round(up, sibling-count() / var(--column));
		grid-column: calc(round(down, (sibling-index() - 1) / var(--div)) + 1);
		grid-row: calc(mod(sibling-index() - 1, var(--div)) + 1);
	}
}

段組み中に区切り線を入れる

段組み内の子要素の高さがすべて同じ場合、関数を色々組み合わせて区切り線を入れたりできます(要素の高さが同じでない場合は計算で位置を求められないので崩れます)。

.container {
	--column: 3;
	column-count: var(--column);
	&>div {
		border: 0;
		border-top: clamp(0px, calc(mod(sibling-index() - 1, round(up, sibling-count() / var(--column))) * 1px), 1px) dashed #00f;
	}
}

clamp(min, value, max)はminとmaxの間に値を丸める関数です。またsibling-index()やsibling-count()の値は単位が無いため、1pxを乗算して単位を付加しています。

対応ブラウザ

2025/08現在ではChromium系(Chrome/Edge/Android)のみ対応しています。

2025/08/17