How to reset this particular CSS selector - html

Question

I have the following selector in a Wordpress CSS theme that I've been advised not to edit by the theme creators:
.entry img, img.thumbnail {
margin-bottom: 10px;
padding: 2px;
border: 1px solid #DDD;
background: white;
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
So I added this in an auxiliary CSS to attempt to 'cancel' out the above CSS selector's effects:
.entry img, img.thumbnail {
margin-bottom: 0px;
padding: 0px;
border: 0px;
background: #fff;
-moz-box-shadow: 0;
-webkit-box-shadow: 0;
box-shadow: 0;
}
However, it doesn't seem to change anything. I'm not sure what I need to edit in the above snippet.
The border I'm trying to get rid of does disappear when I manually uncheck the following options in Google Chromes inspector:
-moz-box-shadow
-webkit-box-shadow
box-shadow

Answer 1

I !important to every CSS Rule or you can add wraper div and use it in css.
Like
HTML
<div id="wraper_div">
<div class="your_class"></div>
</div>
CSS:
#wraper_div .your_class{
/*CSS PROPERTY*/
}

Answer 2

If you inspect the element in for instance Chrome, does your rule apply after the default one?
If so, you could try adding !important to it to override.
.entry img, img.thumbnail {
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
}

Answer 3

1st
Shadows should be set to none
2.
background should be reset without short hand because IE has problems with resetting by shorthand
try
background-color:#fff
instead of
background:#fff
3.
There is something called "specifity".
Youre code has the same specifity as the code it overrides, so it needs to be below the code it overrides, or have higher specifity.
Try target the code with one more selector:
.entry img, img.thumbnail
Higher specifity:
body .entry img, body img.thumbnail
Specifity means "authority" of a css rule. Different selectors have different "weight".
IDs have a weight of 100, classes 10, element selectors 1.
.entry img, img.thumbnail
Has 11 for the first statement and 10 for the second. Add body in front of both to give them +1 specifity, so they override the old code.
5.
If you care to support older IEs, loose the img.thumbnail, it can cause problems in IE, replace with .thumbnail only. You may do this if there are no other elements with the class .thumbnail then img elements.
Hope that helps.

Answer 4

Using none instead 0 fixes the issue. Order of CSS styles also matters, make sure to put these styles at the bottom of your CSS.
Working DEMO
.entry img, img.thumbnail {
margin-bottom: 0px;
padding: 0px;
border: 0px;
background: #fff;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}