🥅

CSS(PostCSS)で親セレクタを参照する

2022/09/14に公開約1,000字

背景画像のWebp対応やAVIF対応を行うために、CSSで対応ブラウザの判別を行う必要がある場面に遭遇しました

対応ブラウザの判別は、Modenizr.jsを利用してトップのhtmlタグにwebpno-webpなどのクラス名が付与させることで可能にしたのですが、
ネストの途中で親セレクタを参照させるためにはどうしたら良いのか、少しつまづいたためメモします

やりたかったこと

Sassの@at-rootのように、ネストの途中でトップの親セレクタを参照したい

sample.scss
.foo {
  color: red;
  @at-root .parent & {
    color: blue;
  }
}
// or
.foo {
  .parent & {
    color: blue;
  }
}

/* Output
  .foo { color: red; }
  .parent .foo { color: blue; }
*/

できた方法

そもそも前提として、現在CSSはネストできないので、PostCSSのpostcss-preset-envのプラグインを使って、草案段階のCSS Nesting Moduleの仕様を使えるようにすることで、CSSでネストできるようにさせています

postcss.config.js
module.exports = {
  plugins: {
    'postcss-preset-env': {
      stage: 3,
      features: {
        'nesting-rules': true,
      },
    },
  },
}

CSS Nesting Moduleでは@nestのルールが使用すると、
下記のようにCSSでもトップの親セレクタを参照できるようになります

sample.css
.foo {
  color: red;
  @nest .parent & {
    color: blue;
  }
}

/* Output
  .foo { color: red; }
  .parent .foo { color: blue; }
*/

https://www.w3.org/TR/css-nesting-1/#at-nest

Discussion

ログインするとコメントできます