このページはコミュニティーの尽力で英語から翻訳されました。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.
Experimental:これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。
sibling-count() はCSS の関数で、それが使用されている親要素の直接の子 DOM 要素の総数を表す整数を返します。
メモ:counter() 関数も同様の結果を提供しますが、<string> を返すのに対し、sibling-count() は計算に使用できる<integer> を返します。
構文
css
--total-sibling-elements: sibling-count();引数
sibling-count() 関数は引数を取りません。
返値
整数。直接の子DOM要素の総数です。
例
動的な列カウント
この例では、コンテナーの列の数をその子要素の数と同じに設定し、それぞれの要素を自分自身で列に配置できるようにしています。
HTML
<ul> コンテナーと、その子要素である<li> 要素をいくつか設置しています。
html
<ul> <li>One</li> <li>Two</li> <li>Three</li> <li>Four</li></ul>CSS
コンテナーのcolumn-count を、コンテナーに含まれている直接の子要素の数と同じに設定します。また、結果の効果をよりよく示すために、奇数要素にbackground-color を設定します。
css
ul { column-count: sibling-count(); text-align: center; list-style-type: none; padding: 0; margin: 0;}li:nth-of-type(odd) { background-color: rgb(0 0 0 / 0.05);}結果
仕様書
| Specification |
|---|
| CSS Values and Units Module Level 5 # funcdef-sibling-count |