Force an html element to be visible when parent is set to display:none

Question

When a parent element has been set to display:none;, how can we make just one of its descendants visible?

css:
div: display:none;

html:
<div>
  <p id='required'>required</p>
  <p>not required</p>
</div>

How can I make p#required alone to be visible.

Limitation - I will be using this in the stylus browser extension.

If parent element is hidden, none of it's children elements can be shown — Piyush, Jul 08 '20 at 09:17

score 1 · Answer 1 · answered Jul 08 '20 at 09:19

You can do this with the visibility property but not display.

Example code below

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <style type="text/css">
        div {
            visibility: hidden;
        }
    </style>
</head>
<body>
    <div>
      <p id='required'>required</p>
      <p style="visibility: visible;">not required</p>
    </div>
</body>
</html>

Force an html element to be visible when parent is set to display:none

1 Answers1