CSS not honouring display initial

Question

I can't workout how to get the second paragraph to display in this example code. I've only tried it in Firefox.

<!DOCTYPE html>
<html>
<head>
<style>
body {
    display: none;
}
.show {
    display: initial;
}
</style>
</head>
<body>

<p>para 1</p>
<div class="show">
    <p>para 2</p>
</div>
</body>
</html>

What are you trying to do by setting `display` of `body` itself to none? — Harry, Nov 02 '16 at 14:28
because you have `display:none` on the `body`, so everything inside the `body` wont display — Andrew, Nov 02 '16 at 14:28
you hid the body, and once you hide an element, everything INSIDE that element is also hidden. — Marc B, Nov 02 '16 at 14:30
I guess you want something like `p {display: none} .show p {display: initial}`? — Harry, Nov 02 '16 at 14:31
What I am looking for is to know how to get the second paragraph to display... — Nigel Horne, Nov 02 '16 at 14:31
Well to get the second paragraph to display you need the body to also display. Oh and [initial doesn't do what you think it does](http://stackoverflow.com/questions/8228980/reset-css-display-property-to-default-value/8229026#8229026). — BoltClock, Nov 02 '16 at 14:32
display:initial must follow the parent element's display value — rajesh, Nov 02 '16 at 14:34
Yes, I see that. I'd really want to the default to be off in some circumstances, just showing a few paragraphs. But I guess that can't be done. I tried inline first, but that didn't show either. — Nigel Horne, Nov 02 '16 at 14:37

score 1 · Answer 1 · answered Nov 02 '16 at 14:40

1

body{
  visibility:hidden}
.show {
  visibility: visible;
  }

<p>para 1</p>
<div class="show">
    <p>para 2</p>
</div>

you can try this instead

answered Nov 02 '16 at 14:40

GvM

1,685
11
13

score 0 · Answer 2 · answered Nov 02 '16 at 14:41

0

I'm going with this:

p {display: none} .show p {display: initial}

It's more work for me, but it does what I want. Thanks.

answered Nov 02 '16 at 14:41

Nigel Horne

53
8

CSS not honouring display initial

2 Answers2