実現したいこと
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 コメント