Removing a specific style property from element

Question

There's a div in my page that gets styling from my company's custom CSS files. Some of this styling messes up how my div is displayed/positioned. I tracked it down to being a display: inline-block;.

Using Chrome developer tool's elements tab, when I deselect this specific line, my element displays properly:

Just to make it clear what I'm doing in Chrome which provides the results I'm looking for

So I figured I'd override the property to display's default value display: inline !important; to simulate "removing" the property. The property was overriden, but my element was still misaligned.

I also tried using jQuery after the element was loaded: $('#myelement').css('display', 'X'); where X is any acceptable value for the display property. I also tried an empty space. None provided the results that unchecking (removing?) the property in the Chrome developer tools did.

So what options do I have left to simulate unchecking the style property in Chrome dev tool's element tab? I assume the closest thing would be to somehow remove the property from my element, but I'm not sure how to do this, as this property is defined in an external CSS file which I'm not allowed to modify.

The default display mode for a `div` is `block`. So maybe `display:block !important;`? — Gary Storey, Jan 05 '15 at 22:47
This should help `:)` => http://stackoverflow.com/questions/5951365/how-to-remove-only-one-style-property-with-jquery — Tats_innit, Jan 05 '15 at 22:48
@GaryStorey Holy... this worked. This is what I get for trusting what w3schools has listed as the default value: http://www.w3schools.com/cssref/pr_class_display.asp -- meta: how do I mark this as resolved? — niebula, Jan 05 '15 at 22:56
@niebula w3schools is notorious for spreading bad information. Use MDN (Mozilla Developer Network) instead. — Gary Storey, Jan 06 '15 at 15:32

score 0 · Accepted Answer · answered Jan 06 '15 at 00:56

0

"The default display mode for a div is block. So maybe display:block !important;?" - Gary Storey

(Answer given as actual answer so the post could be marked as answered.)

answered Jan 06 '15 at 00:56

Roman Rutkowski

87
1
11

Followup: does "initial value" differ from "default value"? [W3schools](http://www.w3schools.com/cssref/pr_class_display.asp) and [Mozzila](https://developer.mozilla.org/en-US/docs/Web/CSS/display) both show the initial/default value to be "inline", which is where I got my assumptions from. – niebula Jan 06 '15 at 01:26
http://www.w3schools.com/cssref/css_initial.asp look at that. Well the default value for a
or tag would actually be `inline` so it isn't quite wrong, for a `div` however the default or initial value is `block`
– Roman Rutkowski Jan 06 '15 at 01:51

score 0 · Answer 2 · answered Jan 06 '15 at 17:38

The default display value for a div is block. So you should set the value to be:

div { display:block; }

If for some reason that doesn't work, you could try overriding by adding an additional element to increase the specificity. For example:

/*specificity value of 2 */
body div { display: block; }

/* or specificity value of 11 */
.content div {display: block; }

 /* or specificity value of 101 */
 #content div

This increases the specificity of the selector allowing you to override the current values without making it impossible to override later. More information can be found in this article, and this site.

Only use the !important if none of the above doesn't work. !important should always be the very last option! Only another !important can override itself with leads to really bad code.

To learn more about the initial/default values of elements you can refer to this article.

Removing a specific style property from element

2 Answers2