Override CSS Parent Display Property

I understand how to override parent styles, and I know that this example is contrived, but is there a way (with built-in CSS) to cause the child range to be shown even if its parent is not set?

<span style="display:none"> <span style="display:block;">Test</span> </span> 
+8
html css
source share
2 answers

Short answer: None.

Long answer. Cannot override display in children if parent is hidden. You can use JavaScript to remove the child range from your parent and place it in the body where you can apply the display style. Things like display, opacity, visibility, etc., affect the elements of the elements to which they are applied, the effects cannot be completely counteracted, but for things like opacity, you can add to them.

+10
source share

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

This value causes the element not to appear in the formatting structure (that is, in visual environments, the element does not generate any fields and does not affect the layout). Elements of a descendant also do not generate any fields; the element and its contents are completely removed from the formatting structure. This behavior cannot be overridden by setting the display property for posterity.

+9
source share

All Articles