How to override global style for img tag in css

Question

I have a template that sets the global properties of the img tag as such:

#content img { background: none repeat scroll 0 0 #FFFFFF; border: 1px solid #CFCFCF; margin-bottom: 2px; padding: 2px; } 

I have a list on my page, and one of the elements should have a small transparent image. The above style makes the image get a background and borders that I don't want. Html list:

 <div id="land_items"> <ul> <li class="trace_item"> <a href="/imglink"><img src="img/popup.png"></a> </li> </ul> </div> 

I tried to override the img tag with the code below, but Firebug continues to display these rules with a strikethrough, indicating that the global img style above takes precedence. I heard it could be because id css styles override class styles. How to do it?

 li.trace_item img { background-color: transparent; border: none; padding: 0; margin: 0; } 

Answer 1

This is because CSS uses specificity when applying styles (it cascades)

It should work for you if you change it to

 #content li.trace_item img { background-color: transparent; border: none; padding: 0; margin: 0; } 

Here, the specifics are explained in terms of Star Wars: http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html

Answer 2

Just add #content to your css switch selector:

 #content li.trace_item img { background-color: transparent; border: none; padding: 0; margin: 0; } 

See the demo here: http://jsfiddle.net/alp82/A5rHY/6/

Answer 3

 #content li.trace_item img { background-color: transparent; border: none; padding: 0; margin: 0; } 

Answer 4

you have different options you convert the contents of the identifier to the content of the class or convert the class trace_item to id or you add! important for your trace_item class or adding #content to .trace_item also works