Question

I have a simple css issue but I couldn’t figure it out at this moment.

I have

html

<div class='test'>
    <img src='loading' class='load'/>
    <img src='title.jpg'/>
    <img src='title.jpg'/>
    <img src='title.jpg'/>

</div>

MY css

.test img{
   margin:15px;
}

.load{
   margin:0;
}

I want the loading image has no margin at all but it seems the 15px applies to my loading image. I thought class has the hightest css level.

How do I solve this? Thanks so much!

Answer 1

Add prefix .test

.test .load {
  margin: 0;
}

score of css selector .test img is (0,0,1,1), and .load is (0,0,1,0) which is less then (0,0,1,1). By add prefix .test. The score become (0,0,2,0).

ref: http://css-tricks.com/specifics-on-css-specificity/