-1

I have a div which is set to display: 'none' by the framework our company is using.

<div id="mydiv" style="display: none">...</div>

However when it is shown, it is set to display: block, but I need it to be display: inline-block. So I tried to style the div like this:

#mydiv:not([display='none']) {
    display: inline-block !important;
}

But it is not working like I was expecting. I want to achieve this with CSS only. Does somebody know how and if this is possible?

sfandler
  • 610
  • 5
  • 23
  • 1
    its enough `#mydiv{ display: inline-block!important; }` – Kristijan Iliev Oct 15 '15 at 16:03
  • You have [invalid selector](http://www.w3schools.com/cssref/sel_attribute_value.asp) – Alex Oct 15 '15 at 16:04
  • [display='none'] - This is not an attribute of the element itself. Style would be the attribute. However, # (ID's) should be used to target a specific/unique element, there should not be multiples. So targeting the ID itself should be enough. – Andrew Ice Oct 15 '15 at 16:07
  • Ok I got it now, thank you! I just realised that my question contained I mistake of myself, I wanted to select #mydiv only if it has its display style NOT set to 'none'. – sfandler Oct 16 '15 at 07:26
  • @Chris nope it isn't working.. When the `div` gets the attribute `style="display: block"` assigned, the `display` value is still `block`! – sfandler Oct 16 '15 at 11:08
  • @Chris Nevermind, looks like Chrome is not differentiating between `block` and `display-block` in the computed styles section. – sfandler Oct 16 '15 at 11:12

2 Answers2

1

try this example: http://codepen.io/anon/pen/WQZada
Here the attribute to check is style, (not display)

#mydiv[style="display: none"] {
    display: inline-block !important;
}

Anyway this is a weak approach, since a change in the markup (e.g. a minification of inline stlye, or an editor change) can affect the style (and viceversa).

Fabrizio Calderan
  • 120,726
  • 26
  • 164
  • 177
  • Thanks for your answer! I just realised that my question contained a few mistakes.. haha – sfandler Oct 16 '15 at 07:21
  • Well, it isn't really working.. But your answer is correct in general. I now got it like this `#module_area[style*="display: block"]) { display: inline-block !important; }`, however when the `display: block` style is set, it does not change to `display: inline-block !important`. What am i doing wrong here? Or is it just because the `!important` is somehow blocking it? – sfandler Oct 16 '15 at 11:03
0

Just targeting the element by it's id should be enough to override its inline style:

#mydiv {
    display: inline-block !important;
}
<div id="mydiv" style="display: none">Test Div</div>

But

For the sake of the question, regarding to selection an element by its inline style value, you could target the [style] attibute and check for the desired text value

(Trouble is that you'd need to match the exact written form of the style property)

#mydiv[style*="display: none"] {
    display: inline-block !important;
}
<div id="mydiv" style="display: none">Test Div</div>
LcSalazar
  • 16,524
  • 3
  • 37
  • 69
  • Thanks for your answer. Today I realised that my question contained mistakes. I want to select #mydiv only if it's display style is NOT set to none. I got it now, thanks! :) – sfandler Oct 16 '15 at 07:24