Display HTML child element when parent element is display:none
No this isn't possible. display:none
hides the element, and thus any child elements will not be displayed.
EDIT:
This might be along the lines of what you want, if you're able to switch from using display
to visibility
.
.hide {visibility: hidden;}
.reshow {visibility: visible;}
Using this method you can hide the contents of the parent element but show the specific <li>
you want. The only caveat is the parent markup will still take up screen real estate. Just won't be shown to the user. That may or may not break the layout you're looking for.
http://jsfiddle.net/vLYnk/2/
No, this is not possible. You could instead move the child element out of its hidden parent and insert it somewhere else in the markup (e.g. via JavaScript).
For specific situations you can use this either:
.hidden-container *{display:none;}
.hidden-container .show-again{display:block}
That will keep .hidden-container
displayed, but everything except .show-again
container will have display property set to none
.
jsFiddle
EDIT:
note, that it'll reset all display properties in childs of .hidden-container
if declared after their styles.