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

質問

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;
}

です。
どこをどのようにすれば良いでしょうか？

回答No.2

t_ohta

＞　とするとエラーの数が1つから3つになってしまいます。

波括弧の中に波括弧が入っている箇所が多数ありますので、同様に修正しないとエラーになります。

回答No.1

t_ohta

.qa { の波括弧が閉じられること無く .q { が始まっています。
これはCSSのルールに反しますので波括弧を開いたら必ず閉じてから次の波括弧を開きましょう。

補足

あるサイトからコピペしたものですが
.qa {　を波括弧で閉じ

.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;
}
}

とするとエラーの数が1つから3つになってしまいます。