cssのマージン

質問

<div class="aaa">文字文字<br>
<img src="画像１" alt="">文字文字文字<br>
文字文字<br>
<img src="画像２" alt="" class="bbb">文字文字<br>
文字文字</div>

div.aaa img {
margin-left:3px;
}
としています。
.bbb {
margin-left:0px;
}
画像１では3pxあけて
画像２ではマージンを0にしたいのですが
画像２の方も3pxあいてしまいます。
どうすればclassをきかせることができるのでしょうか？

回答No.1

elttac · ベストアンサー

これは，カスケーディングのためです。
　「div.aaa img」は，「クラスが 1 個，要素が 2 個」なので，強さを「12」と計算します。一方，「.bbb」は，「クラスが 1 個」で，強さは「10」と計算します。
　「画像 2」の img 要素は，「div.aaa img」も「.bbb」も両方合致しますから，強さを比べてより「強い」で記述ある，「div.aaa img」が採用されて左マージンが 3px になります。

　解決策は，「.bbb」のほうのカスケーディング順位を上げることです。
　たとえば，

div.aaa img.bbb { margin-left: 0; }

ならば，強さは「22」になってこちらが優先になります（img.bbb では強さは「11」なので，まだ強さが足りません）。
　または，カスケーディング順位を一気に引き上げる「! important」を使って，

.bbb { margin-left: 0 ! important; }

と記述します。

　カスケーディングについては，参考 URL の「Let's begin CSS」「Hop step CSS」あたりを参考にするとよいでしょう。

参考URL：

http://www.tg.rim.or.jp/~hexane/ach/

お礼

ありがとうございました。
できました。
参考URLありがとうございました。勉強させていただきます。