9

I understand how to override parent styles, and I know this example is contrived, but is there a way (with inline CSS) to cause the child span to show, even though its parent is set to no display?

<span style="display:none">
<span style="display:block;">Test</span>
</span>
hopper
  • 13,060
  • 7
  • 49
  • 53
OBV
  • 1,169
  • 1
  • 12
  • 25
  • It's common sense! Why would anyone want to do that!? It's like you want show people what's inside the box while the box is closed and locked! – evilReiko Sep 08 '13 at 07:14
  • It would be more like showing someone sitting in a car after it's already left – Robert Byrne Sep 08 '13 at 19:56

2 Answers2

12

Short answer: No.

Long answer: There is no way to override display in children if the parent is hidden. You could use JavaScript to remove the child span from its parent, and place it in the body where you can apply a display style. Things like display, opacity, visibility etc, effect the children of elements they are applied to, the effects can't be completely countered, but for things like opacity they can be added to.

Neaox
  • 1,933
  • 3
  • 18
  • 29
12

No, you cannot override the effect of display: none on inner elements. The reason is that the CSS specification explicitly says, in the description of value none for the display property:

This value causes an element to not appear in the formatting structure (i.e., in visual media the element generates no boxes and has no effect on layout). Descendant elements do not generate any boxes either; the element and its content are removed from the formatting structure entirely. This behavior cannot be overridden by setting the 'display' property on the descendants.

hopper
  • 13,060
  • 7
  • 49
  • 53
Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390