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 |
ブラウザーの互換性
Loading…