4

Для того, чтобы не показывать пустой див я использую псевдокласс :empty. Но нужно скрывать не только пустой див, но и див в котором содержимому прописан стиль display:none, и он только выглядит как пустой, и на самом деле в нем есть html код. Существует ли способ, скрыть такой блок? Желательно с помощью только css.

div {
  display: inline-block;
  background: purple;
  color: white;
  padding: 1rem;
}
div:empty{
  display:none;
}
<br>Див:
<br><div>123</div>
<br><br>
<br>Див с пробелом:
<br><div>&nbsp;</div>
<br><br>
<br>Пустой див:
<br><div></div>
<br><br>
<br>Див с содержимим:
<br><div>
  <section>456</section>
</div>
<br><br>
<br>Див с содержимим со стилем display:none:
<br><div>
  <section style="display: none;">789</section>
</div>
<br><br>

2
  • 1
    вообще ничего не понял!
    – Air
    17 окт 2017 в 11:06
  • @Air пустой див скрыть просто, с помощью псевдокласса, но вот если его делать пустым путем прописывания дисплей нон для ребенка, то псевдокласс не будет работать
    – kizoso
    17 окт 2017 в 11:25

1 ответ 1

3

С помощью css только в теории, с использованием селектора :has, но пока не поддерживают его браузеры (http://caniuse.com/#feat=css-has)

div:has(> section[style*="display:block"]) {
    display: none;
}

Но через jQuery с использованием такого же селектора должно работать

$("div:has(section[style*=`display:block`]").hide()

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.