Как скрыть все, кроме div и всех его дочерних элементов?
Я хотел бы скрыть весь контент на странице, кроме определенного div, содержащего class = "content-container", при печати веб-страницы.
Моя разметка сейчас:
@media print {
:not(.content-container) {
display: none!important;
}
}
Теперь, когда я пытаюсь распечатать страницу, ничего не видно, в том числе и div. Я думаю, что мне нужно выбрать как все, что не является дочерним элементом .content-container, но не знаю, как это сделать.
Кто-нибудь знает, как настроить таргетинг на все, кроме этого div и его детей?
Почему бы вам не добавить класс (например, .np) ко всем элементам (родителям), которые вы не хотите печатать?
К сожалению, я не могу поменять родителей, но спасибо за идею!
Ответы 1
Н.Б. Это решение работает только в том случае, если
.content-containerсам по себе не является дочерним элементом другого элемента.
Вы сможете добиться этого эффекта, применив display: none к каждому элементу на странице, а затем переопределив этот display специально для .content-container и его дочерних элементов.
Пример:
@media print {
/* APPLY DISPLAY:NONE TO EVERYTHING */
* {
display: none;
}
/* OVERRIDE DISPLAY:NONE FOR .CONTENT-CONTAINER AND ITS CHILDREN */
html,
body,
.content-container,
.content-container * {
display: initial;
}
}
Где .content-container ребенок main
Если .content-container постоянно является дочерним элементом main, того же эффекта должно быть относительно легко достичь с помощью следующих правил стиля:
html,
body,
main,
main .content-container,
.content-container * {
display: initial;
}
Рабочий пример:
* {
display: none;
}
html,
body,
main,
main .content-container,
.content-container * {
display: block;
}<header>ABC</header>
<main>
<h2>DEF</h2>
<article class = "content-container">
<p>GHI</p>
<p>JKL</p>
</article>
</main>
<aside>
<p>MNO</p>
<aside>
<nav>
<ul>
<li>PQR</li>
<li>STU</li>
</ul>
</nav>К сожалению, контент-контейнер также является дочерним элементом основного контейнера. Хотя за идею спасибо!
@Sybrentjuh - Не беспокойтесь. Взгляните на второй подход выше. Это должно дать вам инструменты, необходимые для создания чего-то, что соответствует специфике вашей разметки.
О, это круто и похоже, что это работает. Спасибо!!
родитель(и) этого div должен быть виден, иначе он тоже будет скрыт. Ваш селектор слишком короткий... он начнет устанавливать html для отображения: none; оттуда все скрыто.