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

Question

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

899 views Asked by music At 08 July 2020 at 09:13

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.

Original Q&A

There are 1 answers

**StrayAnt** · Answer 1 · 2020-07-08 09:19:25

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>

TechQA.

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

There are 1 answers

Related Questions in HTML

Related Questions in CSS

Related Questions in BROWSER

Related Questions in USERSTYLES

Popular Questions

Popular Tags

Trending Questions