CSS :has() 讓我刪掉一半的 JS
- TOPIC
- CSS
- 刪掉
- 38行 JS
- 推薦度
我原本幫每個 checkbox 綁 change 事件，再去切換父層的 class。功能有，但每次加新卡片都要記得綁。
改成 :has()
現在 :has() 在主流瀏覽器都能用了，父層可以直接根據子層狀態改樣式：
.card:has(input:checked) {
border-color: var(--accent);
}
能用 CSS 表達的狀態，就不要交給 JavaScript。
要注意 body:has(...) 這種範圍太大的寫法，效能會不好，我會盡量避免。