CSSを上書きして、classを無効(無意味)にする方法

実現したいこと

HTMLで複数のclassが指定されていて競合している場合、優先順位に沿っていずれかのスタイルが選択されます。下記のコードではclass3が適用され、4行とも緑色になります。CSSを上書きして、class3が無視されるようにしたいです。すなわち、firstとthirdは青、secondとforthは赤になって欲しいです。

発生している問題・分からないこと

class3の指定を、なにも指定しないのと同じにしたいが、やり方が分からない。

該当のソースコード

CSS

1.class1 {2 color: blue;3}4 5.class2 {6 color: red;7}8 9.class3 {10 color: green;11}

html

1<div class="class1">2 <div class="class3">3 first 4 </div>5</div>6<div class="class2">7 <div class="class3">8 second 9 </div>10</div>11<div class="class1 class3">12 third 13</div>14<div class="class2 class3">15 forth 16</div>

試したこと・調べたこと

上記の詳細・結果

CSS

1.class3 {2 color: unset;3}

を追加してみました。すると、firstとsecondはそれぞれ親要素のclass1, class2を引き継ぎ、青・赤になりました。しかし、third, forthは地の色の黒になってしまいました。

補足

見やすくするために、ここではcolorを使いましたが、実際にはclass1,2は擬似クラス(lang属性)で、colorではなくfont-familyでした。

コメントを投稿

0 コメント