CSS - :has() 一種 "父級" 選擇器

CSS 中的 :has() 是一種可以透過子級元素來限定父級元素的選擇器。一般來說在選擇元素的時候，都是從最上層父級慢慢往下指定：.class1 > .class2 #id。 :has() 則是反過來

/* Matches <a> elements that contain an <img> child */
a:has(img) { … }

/* Matches <a> elements that directly contain an <img> child */
a:has(> img) { … }

/* Matches <section> elements that don’t contain any heading elements: */
section:not(:has(h1, h2, h3, h4, h5, h6))

Reference：

https://www.bram.us/2021/12/21/the-css-has-selector-is-way-more-than-a-parent-selector/

CSS - :has() 一種 "父級" 選擇器

Comments

Software development

HTML Sanitizer API - 原生的 JavaScript Security API

More from this blog

如何開始入門軟體工程領域 - 名詞解釋（長期更新）

我的 MacBook Pro (Apple Silicon) 設定

ChatGPT 下的發展預想

一些覺得有用的工具蒐藏

LeetCode Solution, Medium, 607. Sales Person

Command Palette

Comments

Software development

HTML Sanitizer API - 原生的 JavaScript Security API

More from this blog