Заставить элемент html быть видимым, когда родительский элемент настроен на отображение: нет

Когда для родительского элемента установлено значение display:none;, как сделать видимым только одного из его потомков?

css:
div: display:none;

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

Как я могу сделать p#required один, чтобы быть видимым.

Ограничение - я буду использовать это в расширении браузера стилусом.

Источник

1 ответ

Вы можете сделать это с помощью visibility собственность, но не display.

Пример кода ниже

<!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>

Источник
Другие вопросы по тегам