CSS 酷東西：巢狀選擇器

最近在看 CSS 選擇器的時候，發現一個酷東西──巢狀選擇器！

介紹

巢狀選擇器是什麼呢？好，假設寫 SCSS 時，要給下面的 HTML 寫樣式：

<article class="article">
    <h1 class="title">Hello World</h1>
    <section class="section">
        <p class="text">This is a description.</p>
    </section>
</article>

通常在 SCSS 下會這樣寫：

.article {
    // CSS variable: https://sass-lang.com/documentation/variables
    $bg-color: #FF0000;
    background-color: $bg-color;
    .title {
        font-weight: 900;
    }
    .section {
        p {
            &.text {
                color: grey;
            }
        }
    }
}

然後 CSS 會變成這樣：

.article {
    background-color: #FF0000;
}
.article .title {
    font-weight: 900;
}
.article .section p.text {
    color: grey;
}

有發現嗎？SCSS 程式可以在 CSS 內的選擇器，寫進新的選擇器與規則。

在做組件的時候，這種技巧很有用。

CSS 語法

好消息：現在原生 CSS 也能這樣寫了。而且與 SCSS 的寫法幾乎一樣！

.article {
    /* CSS variable: https://developer.mozilla.org/en-US/docs/Web/CSS/--* */
    --bg-color: #FF0000;
    background-color: var(--bg-color);
    .title {
        font-weight: 900;
    }
    .section {
        p {
            &.text {
                color: grey;
            }
        }
    }
}

我的感想：要是未來實做成熟的話，可能就不需要像 SCSS 這樣的 CSS 預處理器這樣了吧。

支援狀況與實做進度

那麼支援狀況如何呢？嗯──這是一個有點年紀，但還沒納入規範的選擇器：這個規則首次提出是五年前，但直到最近的2023年夏，主流瀏覽器才開始實做。

Firefox 完整支援。
Chrome 等 Blank 系瀏覽器，還不能用元素選擇器。
Safari 與 Blank 系瀏覽器一樣不能用元素選擇器。
Samsung Internet, Opera Mobile, QQ, UC, Baidu 等市占率與 Firefox 相當的其他瀏覽器不支援。

不過……我在寫 CSS 的話，會量避免用元素選擇器寫規則。所以……沒差。比較頭痛的大概是 Samsung 等瀏覽器怎麼辦啦。

最後目前元素選擇器在 W3C 的階段是 Editor's Draft──這還不是太穩定。

明明已經五年了說……

CSS 酷東西：巢狀選擇器

介紹

CSS 語法

支援狀況與實做進度

參考資料