このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
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 |