前言：為什麼 CSS 又多兩個函式

2026 年 5 月，Smashing Magazine 介紹了一組 CSS 新函式 sibling-index() 與 sibling-count()，這兩個函式能讓你直接讀取某個元素在兄弟節點中的「排名」與「兄弟總數」，不用寫 :nth-child()、不用 JavaScript，就能做到階梯式動畫、清單計數、樹狀節點編號等版面效果。

對一般網站業主來說，這聽起來像純前端技術，跟你的網站沒關係。但事實上，這類 CSS 演進會直接影響三件事：

網站的視覺一致性（不用 JS 代表更穩定、不出錯）
網站的載入速度（少一支 JS、少一個 CDN 請求）
網站的維護成本（設計師可以自己改 CSS，不必每次都請工程師）

本篇從入門到中階應用，帶你看這兩個函式到底在做什麼、值不值得現在就用。

一、sibling-index() 與 sibling-count() 是什麼

這兩個函式都屬於 CSS 數值型函式（Numeric Functions），可以想成「數學版的 :nth-child()」：

sibling-index()：回傳目前元素在兄弟節點中的順位，從 1 開始計算。
sibling-count()：回傳總共有幾個兄弟節點（包含自己）。

兩者搭配使用時，可以寫出像「我是第 N 個、共 M 個」這種數學運算式，而不必依賴 JavaScript 或額外的 DOM 屬性。

為什麼前端等了 15 年

在這兩個函式出現之前，要拿到「元素是第幾個」「同層有多少元素」這類資訊，前端只有兩條路：

用 :nth-child() 寫死固定值（彈性極差）
用 JavaScript 讀 DOM 後塞進 CSS 自訂屬性（增加 JS 依賴）

CSS Working Group 從 CSS3 時代就在討論原生支援，但直到 2026 年這兩個函式才正式通過瀏覽器實作，算是解決了一個長達 15 年的痛點。

與 `:nth-child()` 的差異

比較項目	`:nth-child()`	`sibling-index()`
語法	`:nth-child(2n+1)`	`sibling-index()` 回傳數字
可運算	否（只能寫固定表達式）	是（可直接加減乘除）
動態數值	否	是（透過 CSS 計算）
學習門檻	中（需理解 an+b 公式）	低（直觀的數字）

換句話說，:nth-child() 是「選擇器」，sibling-index() 是「可運算的數值」，後者彈性高出許多。

二、三個最常見的實戰場景

以下用三個中小企業官網常見需求做說明，這些場景以前幾乎一定要寫 JS，現在可以完全交給 CSS。

場景 1：階梯式動畫（Staggered Animation）

當你想要清單項目依序淡入、依序滑入時，傳統做法是 JS 設定 setTimeout 或 transition-delay。現在可以直接：

.list-item {
  animation: fadeIn 0.4s ease both;
  animation-delay: calc(sibling-index() * 80ms);
}

第 1 個項目延遲 80ms、第 2 個延遲 160ms，依此類推。不必動 JS，也不必在 HTML 加上 data-index 屬性。

場景 2：自動編號清單（Ordered Counter）

想在卡片或步驟指示器前顯示「第 3 步 / 共 5 步」這種資訊，可以這樣寫：

.step::before {
  content: "Step " counter(step) " / " sibling-count();
}

或者更簡潔的寫法，透過 counter() 搭配 sibling-index()：

.step {
  counter-increment: step;
}
.step::before {
  content: "0" sibling-index();
}

這樣不管清單是 3 項還是 30 項，編號都會自動正確。

場景 3：樹狀節點與最後一項特別樣式

做「最後一個項目不加分隔線」「第一個項目加大標題」這類版型時，常見解法是 JS 動態加 class。其實 CSS 早就能用 :last-child 處理最後一個，但要算「倒數第幾個」就得靠 JS。

現在可以寫：

.item {
  border-bottom: 1px solid #ddd;
  opacity: calc(1 - (sibling-index() - 1) / sibling-count() * 0.5);
}
.item:last-child {
  border-bottom: none;
}

上面這段做了兩件事：清單越後面的項目越透明（視覺層次），同時最後一個項目移除分隔線。完全不靠 JS。

三、進階應用：Grid 與響應式數學化配置

Grid 自動置中最後一行

CSS Grid 做卡片排版時，最後一行如果只有 1 張卡片，常常會靠左對齊不夠美觀。過去的解法是用 :nth-child(3n+1) 補 margin，或用 JS 算殘差。

新的寫法：

.grid-item {
  --is-last-row: mod(sibling-index() - 1, 3);
  margin-left: calc(
    (1 - var(--is-last-row)) * 0px
  );
}

透過 mod() 函式搭配 sibling-index()，可以判斷目前元素在第幾欄，動態調整 margin。這對「設計稿完美主義」的業主特別有用。

響應式字級（依項目數量縮放）

如果你的清單有時 3 項、有時 10 項，想讓標題字級自動縮放以免破版：

.heading {
  font-size: calc(
    clamp(1.5rem, 4vw, 2.5rem) / sqrt(sibling-count()) * 3
  );
}

項目越多字越小，項目少字就大，視覺密度自動平衡。

樹狀圖節點編號

做文件樹、組織圖時，傳統要遞迴計算編號。現在可以純 CSS：

.tree-node::before {
  content: counter(tree) "." sibling-index();
  counter-increment: tree;
}

會自動產生 1.1、1.2、2.1、2.2 這種編號，重點是 HTML 結構改了也不用回頭調 JS。

四、瀏覽器支援現況（2026 年中）

這是業主最在意的部分：現在能不能用？

截至 2026 年中，主流瀏覽器支援狀況：

Chrome / Edge：已支援（Chromium 核心版本）
Firefox：已支援
Safari：已支援
舊版瀏覽器（2024 年以前）：完全不支援

如果你網站的客群以企業內部、B2B 為主，IE 或舊版 Edge 的相容性問題可以忽略；但如果是面向一般消費者的電商、政府標案，仍需評估 fallback 機制。

不支援時的退化策略

.item {
  opacity: 0.7; /* 預設值 */
  opacity: calc(1 - sibling-index() / sibling-count() * 0.3);
}

當函式無效時，瀏覽器會忽略第二行（無效運算），保留第一行的預設值。這樣即使舊瀏覽器跑不動新語法，也不會破版，只是失去漸層效果。

五、對業主的實際效益

把這兩個函式放進工具列，不代表每個案子都要用。但理解它能做什麼，能幫助你在跟設計公司、工程師溝通時更有底氣。

你可以這樣問廠商

「這個階梯動畫能不能純 CSS 寫？」→ 若對方說要 JS，你就有談判空間
「你們的報價裡有沒有 JS 版型計算的成本？」→ 純 CSS 解法可能便宜
「瀏覽器支援範圍怎麼處理？」→ 評估 fallback 機制

什麼時候不適合用

客群使用大量舊裝置（無障礙、長照機構、政府專案）
效果只是「看起來炫」但沒有實質互動價值
設計稿需要高度客製動畫（這時 GSAP、Framer Motion 仍是首選）

六、真實案例：一家設計公司怎麼省下工時

某網頁設計公司接到一個 SPA 風格的作品集官案，業主要求首頁有 12 個作品卡片，要做「滑入時依序淡入」的效果。

傳統報價方式：

工程師寫 Intersection Observer + JS delay 計算
工時估 0.5–1 天
後續維護需更新 JS bundle

導入 sibling-index() 後：

純 CSS 即可達成，工時降到 0.5 小時
沒有 JS bundle 增加，網站更快
之後想改節奏只調 CSS 數字

這不是說所有案子都能這樣省，而是當需求是「順序型視覺」時，純 CSS 解法的成本優勢非常明顯。