cssセレクタの説明だと

# : id
. : class

div#main ←idがmainのdivタグ
span.blue ←classがblueのspanタグ
#content ←idがcontentの要素

みたいに書いてるので idかclassのどっちかで選択するものなんだ って思ってました
 

あるとき idで指定している要素にclass名をJavaScriptから付けたり外したりしてデザインを変えようとしました

div#abc{
    color: #333;

div.red{
    color: red;
}
のようなスタイルを用意しておいて

<div id="abc">てきとーな文字</div>
にclass追加して
<div id="abc" class="red">てきとーな文字</div>

にしたりclass外して
<div id="abc">てきとーな文字</div>
にしたりでstyle属性を追加せずにデザインを変える方法です


これだと class="red" をつけてもセレクタの強さがdiv#abcのほうが強いので 色が変わりません
div.redの方だけ html>body>…>div.red のようにしてセレクタが勝つようにしようかとも考えましたが見づらいしいい方法に思えません

#abc.redの両方使えたらなー
無駄だろうと思いつつ
div#abc.red と書いてみると


動いたーーー!!!!


えーこんな書き方できたんだ
今まで無駄なことしてたなー

こんな簡単にできるなら もっと早く教えてよー