sibling-count()
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
sibling-count() は CSS の関数で、それが使用されている要素の兄弟 DOM 要素（親要素の直接の子）の総数（自分自身を含む）を表す整数を返します。
構文
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);
}
結果
仕様書
| Specification |
|---|
| CSS Values and Units Module Level 5 # funcdef-sibling-count |