Why can't I override display property applied via an asterisk?

Question

I want to hide all the elements in some screen resolution and just show the wanted element to be visible:

For instance:

*{
    display: none;
}
#block{
    display: block !important;
}

But this won't override the display property anymore. demo

It's applying `display: none;` to the `body` element; since that's not visible, nothing inside it is visible either, regardless of what its display value is set to. — Anthony Grist, Oct 16 '14 at 12:16
+1. That's a good question. It's a tricky thing that many people would oversee. — emerson.marini, Oct 16 '14 at 12:18
Even after applying display block to the body the element is not visible http://jsfiddle.net/nk8np9vo/1/ — Bhojendra Rauniyar, Oct 16 '14 at 12:18
You need to apply to `html` also: http://jsfiddle.net/nk8np9vo/2/ — emerson.marini, Oct 16 '14 at 12:18

score 8 · Accepted Answer · answered Oct 16 '14 at 12:16

8

* targets all elements within the document, including html and body as well. That's why the content is still hidden - verify that.

If you want to select all elements within the <body> you should do that as follows:

body * {
    display: none;
}

#block {
    display: block;
}

<div id="block">block</div>

answered Oct 16 '14 at 12:16

Hashem Qolami

@Paulie_D indeed! I just focused on the selector. – Hashem Qolami Oct 16 '14 at 12:21
1

This worked out fine for me when I wanted to print just the chart.js chart on a page; which i answered via this question: http://stackoverflow.com/questions/37192878/chart-from-chart-js-to-pdf (printing just a chart using media-print). – Rick Hellewell Apr 27 '17 at 04:17

score 1 · Answer 2 · answered Oct 16 '14 at 12:16

1

Because body and html are included in the universal selector *, which has the display: none; rule.

answered Oct 16 '14 at 12:16

Lorenzo Marcon

1

@C-linkNepal - [and you don't need !important](http://jsfiddle.net/yy06ra96/1/) as the style will be overwritten. – misterManSam Oct 16 '14 at 12:20

score 1 · Answer 3 · answered Oct 16 '14 at 12:18

1

If you open the target frame with your favourite DOM inspector you'll see that <body> remains hidden:

Firebug

answered Oct 16 '14 at 12:18

Álvaro González

@misterManSam - There're excellent explanations so far in other answers. Mine just provides a hint on how to diagnose this kind of issues. – Álvaro González Oct 16 '14 at 12:25

3 Answers3