2024年のCSS、最先端の書き方

SassやSCSSの便利な書き方がCSSでも使える様になっています！
コンパイラを通す必要がなくなるので、シンプルに管理できるようになりますね。

ネスト（入れ子）

SCSSと同じように、ネストで記述することが可能になりました！

.wrapper {

    .children {

    }
}

&による連結も使えるし、メディアクエリのネスト化も可能です！

注意点

&は名称の連結には使えない

.card {
    &__contents {
        /* .card__contents として認識されない */
    }
}

疑似クラス

:not()

否定。指定したセレクタが含まれていない場合のスタイルを指定できる。

:is()

複数のセレクタをひとつにまとめる。
複数のセレクタの下にある要素を指定したいときに便利。

▼いままでの書き方

.card .attention,
.button .attention{
    color: red;
}

▼:is()を使った書き方

:is(.card, .button) .attention{
    color: red;
}

:has()

指定した要素が、子要素として存在している場合

.card {

    &:has(img){
        /* .cardの中に、img要素が含まれている場合 */
    }
}

指定した要素が直後に存在している場合

.card h2:has(+ p) {
    /* h2要素の直後にp要素が存在している場合 */
}

まとめ

SassやSCSSの登場以来、ずっとSCSSで書き続けてきましたが、ピュアCSSがやっと追いついてきましたね。
まだまだ足りない機能ももちろんありますが、必要最低限は揃っている印象です。
みなさんもぜひ、改めてピュアCSSでどこまで書けるのか確認してみてください。