CSS `sibling-count()` 関数

利用可能性は限定的

この機能はベースラインではありません。最も広く使用されているブラウザーの一部で動作しません。

Want more support for this feature? Tell us why.

もっと詳しく
完全な互換性情報を見る

sibling-count() は CSS の関数で、それが使用されている要素の兄弟 DOM 要素(親要素の直接の子)の総数(自分自身を含む)を表す整数を返します。

メモ: counter() 関数は同様の結果を <string> で返す(これは生成コンテンツにより適しています)のに対し、 sibling-index() は <integer> で返します(これは計算に使用することができます)。

構文

css

sibling-count()

引数

sibling-count() 関数は引数を取りません。

返値

整数。この要素自身を含む、兄弟 DOM 要素の総数です。

例

動的な列カウント

この例では、コンテナーの列の数をその子要素の数と同じに設定し、それぞれの要素を自分自身で列に配置できるようにしています。

HTML

<ul> コンテナーと、その子要素である <li> 要素をいくつか設置しています。

html

<ul>
 <li>One</li>
 <li>Two</li>
 <li>Three</li>
 <li>Four</li>
 <li>Five</li>
</ul>

CSS

それぞれのリストアイテムの width を、そのリストが含む直接の子要素の数で割ります。同時に、結果の効果をより明確に示すため、奇数番目の要素にはすべて background-color を設定します。

css

ul {
 list-style-type: none;
 padding: 0;
 margin: 0;
 text-align: center;
 display: flex;
}
li {
 width: calc(100% / sibling-count());
}
li:nth-of-type(odd) {
 background-color: rgb(0 0 0 / 0.05);
}

結果

[フレーム]

仕様書

仕様書
CSS Values and Units Module Level 5 # funcdef-sibling-count

ブラウザーの互換性

MDN の改良に協力

協力方法を知る

このページは MDN の貢献者によって 2026年6月25日に最終更新されました。

GitHub でこのページを表示 • このコンテンツに関する問題を報告

CSS sibling-count() 関数

HTML

CSS

結果

MDN の改良に協力

CSS `sibling-count()` 関数