jquery.app
日本語
EnglishDeutschFrancaisEspanol日本語Nederlands

CSSツール

無料 CSS sibling-index()・sibling-count()ジェネレーター

nth-childセレクターなしでDOM位置に基づいて要素をスタイリングするsibling-index()とsibling-count()を使ったCSSを生成します。

ツールを読み込み中...

CSS sibling-index()・sibling-count()ジェネレーターとは

sibling-index()とsibling-count()はCSS関数（Chrome 138+）で、要素のDOM上の兄弟間での位置を公開します。sibling-index()は要素の位置を表す1から始まる整数を返します。sibling-count()は兄弟要素の総数を返します。静的パターンにマッチするnth-childセレクターとは異なり、これらの関数は動的な数値を生成し、calc()内で数値または整数を受け付ける任意のプロパティで使用できます。これにより、ハードコードされたセレクターなしで、スタッガー遅延、交互の色、幅グラデーション、自動レイヤリングが可能になります。

クイックアンサー

sibling-index()は要素の兄弟間での1から始まる位置を返し、sibling-count()は兄弟の総数を返します。calc()内で使用して、DOMの変更に応じて自動的に適応するスタッガー遅延、カラーサイクル、幅グラデーション、位置オフセットを作成できます。nth-childセレクターやJavaScriptは必要ありません。

Last updated: 2026-05-30

制限事項

  • sibling-index()とsibling-count()にはChrome 138+が必要です。2026年5月現在、FirefoxとSafariはまだこれらの関数をサポートしていません。
  • 関数はDOM順序を返し、視覚的な順序は返しません。CSSフレックスボックスのorderやグリッドプレースメントで並び替えられた要素は、インデックスが視覚的な位置と一致しない場合があります。
  • sibling-count()にはdisplay: noneで非表示のものを含む、すべてのDOM兄弟が含まれます。要素を視覚的に非表示にしても兄弟カウントから除外しない場合は、visibility: hiddenを使用してください。

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

使い方

  1. 位置依存にしたいプロパティを選択します。animation-delay、background-color、width、opacity、z-indexなどが対象です。
  2. 兄弟関数を選択します。sibling-index()は要素ごとの位置指定、sibling-count()はコンテナ認識のスケーリングに使用します。
  3. calc()を使用して式を構築し、生のインデックスを目的の値範囲に変換します。
  4. 生成されたCSSをコピーして、位置依存のスタイリングが必要な子要素に適用します。

主な用途

  • 各アイテムが兄弟間での位置に基づいて順次アニメーションするスタッガーアニメーション遅延を作成します。
  • 要素インデックスに基づいてパレットを自動的に巡回するカラーサイクルを構築します。
  • 手動のnth-childルールなしで兄弟要素間で幅または高さのグラデーションを生成します。

用途

使用例

例

スタッガーリストアニメーション

縦型リストのアイテムが1つずつフェードインします。各アイテムにanimation-delay: calc(sibling-index() * 0.1s)を適用します。最初のアイテムは0.1秒、2番目は0.2秒と遅延し、アイテムの追加や削除に応じて自動的に調整されます。

例

カード全体のカラーサイクリング

カードグリッドが3つのアクセントカラーを巡回します。background: hsl(calc(sibling-index() * 120deg), 70%, 50%)を適用します。各カードは前のカードから120度回転した色相になり、nth-childセレクターなしで自然なカラーサイクルを生成します。

よくあるミス

  • 数値を受け付けないプロパティでsibling-index()を使用すること。sibling-index()は整数を返すため、width内のcalc()、animation-delay、opacity、z-indexなど数値または整数値をサポートするコンテキストで使用する必要があります。
  • sibling-count()がフィルターや非表示の要素を考慮すると思い込むこと。sibling-count()は表示状態に関係なく、DOM内のすべての兄弟要素をカウントします。display: noneの要素もカウントされます。要素を視覚的に非表示にしても兄弟カウントから除外しない場合は、代わりにvisibility: hiddenを使用してください。
  • 異なるブレークポイントでアイテムが並び替えられるグリッドにsibling-index()を適用すること。sibling-index()はDOM順序を反映し、視覚的な順序は反映しません。CSSグリッドやフレックスボックスの並び替え（orderプロパティ）では、インデックスが表示レイアウトと一致しない場合があります。

検証

  1. Chrome DevToolsでスタイル設定された兄弟要素を検査し、sibling-index()またはsibling-count()を使用したプロパティの計算値が期待される位置とカウントに一致することを確認します。
  2. 兄弟要素を動的に追加または削除し、コードを変更せずにスタイルが新しい位置と総数を反映することを確認します。

FAQ

CSS sibling-index()・sibling-count()ジェネレーターのFAQ

sibling-index()とsibling-count()をサポートしているブラウザは？

Chrome 138+およびEdge 138+です。2026年5月現在、FirefoxとSafariはまだsibling-index()とsibling-count()を実装していません。クロスブラウザ対応のためには、sibling-index()とsibling-count()をプログレッシブエンハンスメントとして使用し、nth-childセレクターやJavaScriptをフォールバックとして使用してください。

sibling-index()はnth-childとどう違いますか？

nth-childはパターン式（2n+1、odd、3n）に基づいてセレクターをマッチさせ、要素を選択するかしないかのどちらかです。sibling-index()は実際の数値位置を値として返し、calc()式で使用できます。nth-childでは位置ごとに個別のルールが必要ですが、sibling-index()では1つのルールですべての位置に自動的に適応します。

sibling-count()を使用して逆グラデーション効果を作成できますか？

はい。sibling-count()とsibling-index()をcalc()で組み合わせると、最初から最後の子に向けて不透明度が減少するような逆効果を作成できます：opacity: calc(1 - (sibling-index() - 1) / sibling-count())。最初の子は不透明度1、最後の子は0に近づきます。兄弟が追加または削除されると、グラデーションは自動的に再計算されます。

関連ツール

その他のcssツール

こちらもお試しください

こちらもお試しください