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/