с помощью CSS пустого, чтобы скрыть элемент

Question

Использования хрома для проверки я вижу какой-то код, как это:

<div class="entry-content"> 
    <p>We .... </p> 
</div> 
<footer class="entry-footer"> 
        </footer> 

Иногда сноска пуста, а на друг это не так.

Когда он пуст, я стараюсь, чтобы скрыть его:

footer.entry-footer:empty { 
display:none; 
} 

, но он не работает.

Так что я либо делаю что-то неправильно (или я предполагаю, что это на самом деле не пуст!)

Answer 1

:empty требует элемент в тоже пусто.

Вот example, .test.blue и .test.red имеют белое пространство и не display: none; (без JS ниже, где .test.red становится скрытой) ...

, если вы хотите, чтобы удалить пустое пространство после нагрузки, здесь это некоторые JS, чтобы сделать это:

var empties = document.querySelectorAll('[selector_here]'); 
for (key in empties) { 
    if (typeof empties[key].innerHTML != "undefined") empties[key].innerHTML = empties[key].innerHTML.trim() 
} 

JS выше обрезает пробелы из любого элемента, соответствующий данной селектор, в моем примере я использовал класс empty (вы можете увидеть, что работает на .test.red)

Но я бы рекомендовал удалить его из HTML

Answer 2

Я сделал быстрый test для вас, и, казалось бы, что пробельные рассчитывает как содержание. Начиная ваш закрывающий тег на новой строке будет тихо вставлять символ новой строки, поэтому поэтому ваш селектор для: empty не работает.

В качестве решения, ваш HTML должен выглядеть следующим образом:

<footer class="entry-footer"></footer> 

Потому что нет буквально ничего между открывающим и закрывающим тегами, элемент проходит как :empty