CSS attribute not value selector issue [duplicate]

Question

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?

[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
– Andrew Ice, Commented Oct 15, 2015 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
– sfandler, Commented Oct 16, 2015 at 7:26
@Chris nope it isn't working.. When the div gets the attribute style="display: block" assigned, the display value is still block! — sfandler
– sfandler, Commented Oct 16, 2015 at 11:08

Fabrizio Calderan · Accepted Answer · 2015-10-15 16:13:44Z

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).

edited Oct 15, 2015 at 16:13

answered Oct 15, 2015 at 16:08

Fabrizio Calderan

124k26 gold badges171 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

sfandler Over a year ago

Thanks for your answer! I just realised that my question contained a few mistakes.. haha

sfandler Over a year ago

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?

LcSalazar · Accepted Answer · 2015-10-15 16:08:53Z

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>

answered Oct 15, 2015 at 16:08

LcSalazar

16.9k3 gold badges40 silver badges71 bronze badges

1 Comment

sfandler Over a year ago

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! :)

Collectives™ on Stack Overflow

CSS attribute not value selector issue [duplicate]

2 Answers 2

2 Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Linked

Related