CSS/クラス指定を外す

Question

前提・実現したいこと

HTML、CSSを学習中です。

divに２つのクラス名を指定した上で、一方は同じクラス名だとします。

<div class=btn aaa>hohoho</div> <div class=btn bbb>hehehe</div> <div class=btn ccc>hahaha</div> <div class=btn ddd>huhuhu</div>

cssにて、.btn を指定したいのですが、

<div class=btn ddd>huhuhu</div> には、この指定を反映させたくありません。

この場合に適切なcss指定法を教えて下さい。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

ソースコード

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[H40831]

HTMLでclassを記述するにはクォーテーションで囲む必要があります。

[S5OUZW]

ご指摘ありがとうございます。

<div class="btn aaa">hohoho</div>
<div class="btn bbb">hehehe</div>
<div class="btn ccc">hahaha</div>
<div class="btn ddd">huhuhu</div>

cssにて、.btn を指定したいのですが、
<div class="btn ddd">huhuhu</div>
には、この指定を反映させたくありません。

この場合に適切なcss指定法を教えて下さい。

[H40831]

質問文は編集できますので、次からはそうすると好印象です

[S5OUZW]

質問文編集可能のアドバイスを含め、ありがとうございました。

[m.ts10806]

＞HTMLでclassを記述するにはクォーテーションで囲む必要があります。

ブラウザによるかもしれませんが、属性値のクォーテーションは必須ではないです(HTML5、Chromeで確認)。
属性値を複数指定したい場合は必要です。

[Lhankor_Mhy]

> 属性値のクォーテーションは必須ではないです

HTML5の仕様によると、"Unquoted attribute value syntax"というクォーテーション抜きの属性文法があります。そして、"must not contain any literal ASCII whitespace"とあるので、 文法的にはm.ts10806さんのおっしゃる通りかと。
https://html.spec.whatwg.org/multipage/syntax.html#attributes-2

[H40831]

そうなんですね！勉強になります！

Answer 1

以下でいいかと思います。

.btn{
  color:red;
}
.btn.ddd{
  color:inherit; /* or unset or initial
}

ただ、そのHTMLコードは「２つのクラス名を指定」になっていませんので、ダブルクォーテーションで修正してください。

Answer 2

CSSセレクタのチートシート
セレクタの書き方がわからないときは、自分はいつもこのサイトを参考にしています。

　
classが aaa のものだけ指定したいなら

.btn.aaa{
    …
}

　
classが bbb じゃないものを全て指定したいなら

.btn:not(.bbb){
    …
}