Chrome 138 の新機能、sibling-count()とsibling-index()で兄弟要素の制御がより簡単に！

CSSで「兄弟要素の数」や「要素自身の順番」がわかる時代がやってきました。

これまで、「この要素は何番目？」「兄弟は全部で何個あるの？」といった要素の数に関する情報は、JavaScriptでなければ取得できませんでした。しかし、2025年6月にリリースされたChrome 138で新たに登場した sibling-count() と sibling-index() を使えば、CSSだけで要素の順番や兄弟要素の数に応じたスタイルが簡単に書けるようになります。

sibling-count() ってなんぞや？

sibling-count() は、”現在の要素が所属する兄弟グループの「総数」” を返す関数です。対象は、自分と同じ要素名（タグ）の兄弟要素のみ。たとえば、親要素<ul>の中に子要素<li>が5つあったとすると、どの<li>でも sibling-count() は「5」を返します。

sibling-index() は？

sibling-index() は、自分がその兄弟グループの中で何番目かを返します。カウントは1から始まり、先頭の要素が「1」、次が「2」…となります。この値を使えば、「偶数番目に背景色をつける」「3番目だけ装飾を変える」などの位置に応じたスタイルが書けるようになります。

これまでの疑似クラスと何が違うの？

新たに追加されたからには、既存のツリー構造疑似クラスよりも便利であってほしい。いったいどのような違いがあるのか。

「最後の要素にだけ線を消す」→ :last-child が使えたけど、柔軟性に欠ける
「兄弟が3つ以上のときだけ余白を変える」→ CSSだけでは難しく、JSが必要
「順番に色を変える」→ :nth-child() を書きまくるか、JSで処理

sibling-*() 関数の登場により、これらすべてがCSSだけで制御可能になります。

実際にどんな場面で使えるの？

最後の要素にだけ線をつけない

.item {
  border-bottom: 1px solid #ccc;
}

.item:nth-child(sibling-count()) {
  border-bottom: none;
}

:last-child の代わりに使うことで、要素の種類を問わない柔軟な制御ができます。

順番にグラデーション背景を適用

.card {
  background-color: hsl(calc(360 * sibling-index() / sibling-count()), 70%, 80%);
}

このようにすると、色のグラデーションが順番に自動適用されます。ul > li や .card-list > .card のような構造に使うとよさそうです。

条件付きスタイル（兄弟要素が多いときだけ変える）

@supports (width: calc(100% / sibling-count())) {
  .panel {
    width: calc(100% / sibling-count());
  }
}

たとえば、兄弟が5個以上のときにデザインを切り替えるといった高度なスタイルロジックも、今後は可能になります（将来的には条件式サポートが強化される見込み！）。

ブラウザの対応状況は？

すぐにでも使いたくなる新機能ですが、各ブラウザでのサポート状況はどうなのか。Can I use… してみましょう。

types: sibling-count()

types: sibling-index()

赤いですね。現時点では Chrome 138以降でサポートされているほか、Chromiumベースである Edgeではサポートされていますが、Firefox や Safari は未対応となっています。

Google Chrome 138以上：対応済
Microsoft Edge（Chromiumベース）：対応済
Firefox：未対応（議論中）
Safari：未対応（WebKitバグ登録済）

全ユーザーを想定した本番環境で使うには、下記のように @supports によるフォールバックが必要になってくる状況です。

@supports (width: calc(100% / sibling-count())) {
  .item {
    width: calc(100% / sibling-count());
  }
}

@supports not (width: calc(100% / sibling-count())) {
  .item {
    width: 33.333%; /* 固定値などでフォールバック */
  }
}

知っておくべき次世代CSS

sibling-count() と sibling-index() の登場により、CSSはただのスタイル言語から、構造に応じて判断する”ロジック付きスタイル”へと進化しています。

「JavaScriptに頼らずに構造的な装飾ができる」「CMSやJSで出力されたコンテンツでも柔軟に対応できる」「簡単で読みやすく、メンテしやすいコードになる」など、WEBページのパフォーマンスにも気を使う開発者や、デザインの表現力を高めたいウェブ制作者にとって魅力的な機能です。

「これ、CSSだけでできたらいいのにな」と思っていたことが、どんどん実現できる時代がやってきました。今はまだ対応ブラウザが限定されていますが、CSSの未来を先取りしたい方はぜひ試してみてください！