W3C CSSで文法解析エラーというエラーメッセージ

Question

W3C CSS 検証サービスで

文法解析エラーが発生しました

というエラーメッセージが出ます。

わからないので教えていただけないでしょうか。
cssは次のとおりです。

.qa {
  color: #ffffff; 
  font-size: 17px; 
  font-weight: bold; 
  text-align: left;
  .q {
   background: linear-gradient(-80deg, #ff65ff, #65ffff); 
  border: 2px solid #ff0000; 
  border-radius: 20px; 
    height: 60px;
    padding: 15px 40px 15px 15px;
    position: relative;
    cursor: pointer;

    &:before {
      position: absolute;
      content: "";
      display: block;
      width: 10px;
      height: 2px;
      background-color: #ffffff;
      right: 15px;
      top: 50%;
      transform: translate(0, -50%);
    }
 
    &:after {
      position: absolute;
      content: "";
      display: block;
      width: 10px;
      height: 2px;
      background-color: #ffffff;
      right: 15px;
      top: 50%;
      transform: translate(0, -50%) rotate(90deg);
    }
  }
 
  .q.active {
    &:after {
      display: none;
    }
  }
 
  .a {
    background-color: #999999;
    border-radius: 20px; 
    height: 60px;
    display: none;
    padding: 15px;
  }
}

検証したスタイルシートを以下に示します
の表示は

.qa {
color : #ffffff;
font-size : 17px;
font-weight : bold;
text-align : left;
}

です。
どこをどのようにすれば良いでしょうか？
よろしくお願いいたします。

Comments

[kahomaru]

.qaが閉じられていないと思い
.qa {
color: #ffffff;
font-size: 17px;
font-weight: bold;
text-align: left;
}
としてみましたがエラーの数が1つから3つになってしまいました。

[Lhankor_Mhy]

CSS Nesting Module に対応してないだけではないかな、と思いました。

[kahomaru]

ご投稿ありがとうございます。
CSS Nesting Module に対応したように書き換える方法はあるのでしょうか。

[Lhankor_Mhy]

CSS Nesting Module を使わないように書き換える、という意味ですよね？
SCSS としてコンパイルするのがいいかと思います。
https://www.sassmeister.com/

もし、検証サービスのコードを CSS Nesting Module に対応するように書き換えるということであれば、可能は可能なんでしょうけれど、それなりにスキルと時間がかかると思います。

[kahomaru]

ご投稿ありがとうございます。
コンパイルすることにします。

Answer 1

他のネストされたCSSもW3Cでチェックしてみましたが、似たような形でエラーとなりました。
すでにコメントに書かれているように、CSS Nesting Moduleに対応していないだけだと思います。

補足

2023年9月30日現在、googleで少し調べた限りではCSS Nesting Moduleに対応した検証サービスはなさそうでした。

Comments

[kahomaru]

ご投稿ありがとうございます。
CSS Nesting Module に対応したように書き換える方法はあるのでしょうか。

[_peanuts_]

逆ですよ。W3Cの検証サービスがCSS Nesting Moduleに対応できていないだけで、ブラウザは対応しているのでこのまま使用し、ブラウザで表示して期待どおりの見た目になっているか確認すると良いでしょう。
kahomaruさんのコードはCSS Nesting Moduleに倣ったものになっています。

[kahomaru]

ご投稿ありがとうございます。
コンパイルすることにします。