CODEWITHSUNDEEP
htmlcss
fakeguybrushthreepwood
fakeguybrushthreepwood

Reputation: 3073

How to reset this particular CSS selector

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:

Upvotes: 0

Views: 576

Answers (4)

Gurpreet Singh
Gurpreet Singh

Reputation: 21233

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;
}

Upvotes: 0

Rajiv Pingale
Rajiv Pingale

Reputation: 1015

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*/
}

Upvotes: 1

user1721135
user1721135

Reputation: 7092

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.

Upvotes: 0

sphair
sphair

Reputation: 1670

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;
}

Upvotes: 0

Related Questions