CODEWITHSUNDEEP
htmlcssbrowseruserstyles
music
music

Reputation: 221

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

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.

Upvotes: 0

Views: 1063

Answers (1)

StrayAnt
StrayAnt

Reputation: 379

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>

Upvotes: 1

Related Questions