CSS :has() 該取代哪些 JavaScript？我會用與不會用的界線

外層依內容切換版型#

卡片有圖片時排成兩欄，沒有圖片時單欄。以前多半在模板裡判斷有沒有圖，再輸出不同 class；改成 CSS 後，模板就不用和樣式同步維護同一個條件。

1
.card {
2
  display: block;
3
}
4

5
.card:has(> img) {
6
  display: grid;
7
  grid-template-columns: 120px 1fr;
8
  gap: 1rem;
9
}

> img 只看直接子元素。卡片內文如果夾了圖片，不會被誤判成「有封面」。

選項勾選後，外層卡片跟著變#

1
<form>
2
  <label class="plan"><input type="radio" name="plan" value="basic"> 基本方案</label>
3
  <label class="plan"><input type="radio" name="plan" value="pro"> 進階方案</label>
4
</form>

1
.plan {
2
  border: 1px solid #c8c8c8;
3
}
4

5
.plan:has(input:checked) {
6
  border-color: #0064ff;
7
}

這是我最推薦的用法。勾選狀態本來就由瀏覽器管理，CSS 只是讀它。用 JavaScript 加 class 等於多養一份要同步的狀態，而且容易漏掉某些路徑：實測呼叫 form.reset() 後，radio 回到未勾選，卻沒有觸發 change 事件。靠 change 維護的 class 會停在舊狀態，:has() 的框線則會跟著恢復。

依後方元素調整間距#

1
h2 {
2
  margin-bottom: 20px;
3
}
4

5
h2:has(+ .subtitle) {
6
  margin-bottom: 4px;
7
}

標題後面緊接副標時縮小間距。Markdown 或 CMS 產出的內容特別適合這樣寫，因為通常改不到 HTML 結構，只能從選擇器下手。

用樣式假裝停用的按鈕#

「沒勾同意條款，送出按鈕就變淡」很容易寫成這樣：

1
.form:has(#agree:not(:checked)) .submit {
2
  opacity: 0.5;
3
  pointer-events: none;
4
}

畫面看起來停用了，按鈕本身並沒有。實測時這顆按鈕的 disabled 仍是 false，程式呼叫 click() 或 form.requestSubmit() 都會照樣送出表單。pointer-events 只管滑鼠、觸控這類指標操作，鍵盤使用者 Tab 到按鈕一樣按得下去，螢幕報讀軟體也會把它當成可用的按鈕。

真的要擋，就讓勾選框加上 required 交給表單驗證，或用 JavaScript 切換 disabled。:has() 可以留著做額外的視覺提示，但它擋不住送出。

需要回報展開狀態的元件#

用隱藏 checkbox 搭配 :has(:checked) 做下拉選單，滑鼠點起來沒問題，輔助技術讀到的卻是一個勾選框，而不是一顆會展開選單的按鈕。這類元件我會用 <details>／<summary>、Popover API，或在 JavaScript 裡維護 aria-expanded。

錨點範圍太大的條件#

開啟對話框時鎖住頁面捲動，常見寫法是 body:has(dialog[open])。MDN 的效能說明特別提到，錨點選 body、:root 或 * 時，整個子樹任何 DOM 變動都可能讓瀏覽器重新檢查條件，建議改用範圍小的容器，並在 :has() 裡用 >、+ 限縮查找範圍。

我沒有量測過這個成本在一般頁面有多大。但對話框的開關本來就有 JavaScript 處理，在同一段程式裡切換一個 class 幾乎不增加維護負擔，所以聊天室、無限捲動這類 DOM 變動頻繁的頁面，我會選擇那條路。