Как скрыть div если второй div пустой?

Question

[fOstere]

Здравствуйте, пишу сюда от безысходности, голова уже не фурычит, обычно я такое на раз решал.

Я пытаюсь скрыть div1 и div2если div1 пустой
Щас получилось все в точности до наоборот, если div2 пустой, то div1 тоже исчезает, а наоборот не выходит.

Подскажите где ошибка. Спасибо.

div#div2:empty + div#div1 {display: none;}

<div id="div2">title</div>
<div id="div1">111</div>

Comments

[Lord_Dantes]

Действуйте от родителя

[fOstere]

slave bb, Спасибо, а можно пример?

[Rustam Bainazarov]

fOstere, так сделать невозможно. Обратного селектора нет, только ниже по коду в CSS можно идти. Пишите JS.

[fOstere]

Рустам Байназаров, Понял, принял, спасибо.

Answer 1

[Ragtime Kitty]

Вы можете поменять их местами в разметке и использовать обертку с column-reverse:


Только саму обертку таким образом скрыть не получится. Тут только скрипты.

Comments

[fOstere]

Спасибо, ответ конечно не тот что я ожидал, но визуально выглядит именно так как надо, правда пока не знаю как на телефонах у людей будет смотреться, но все равно спасибо:) ибо js вариант не мой, так как визуально, элементы пропадают после загрузки страницы, а это как по мне, неправильно.

[Ragtime Kitty]

fOstere, На мой скромный взгляд - это единственный способ добиться такого поведения, как вы описали, без скриптов. Селектор «"перед" элементом» в CSS в ближайшее время не появится, так что не очень понимаю, какой ответ вы ожидали.

Поставьте проверку пустых блоков в конце body без обертки в load и будет все визуально шоколадно.
e.g. https://jsfiddle.net/2wdru6qc/

[fOstere]

Ragtime Kitty, Спасибо:)) я уже использую ваш способ:)))

Посмотрел вашу ленту ответов и мягко говоря был в шоке)))столько нового для себя увидел, таккое впечатление что 8 лет я стагнировал и что-то очень важное проспал:)

[Ragtime Kitty]

fOstere,

Answer 2

[Chesterfield25]

Попробуйте изменить местами div id сделать первым дивом а div class вторым

div#div1:empty + div#div2 {display: none;}

<div id="div1"></div>
<div id="div2"></div>

Comments

[fOstere]

Спасибо, это самое очевидное, но не работает. Уже пробовал.

Answer 3

[Олег]

Почитай подробнее порядок выполнения.
Ключевое слово "ПОСЛЕ"
https://developer.mozilla.org/ru/docs/Web/CSS/CSS_...

Comments

[fOstere]

Спасибо, Олег. Но, Увы и ах. Я все это знаю, и лишь показал вариант который хоть как-то сработал.

Вот. Можете попробовать.

если div1 пустой, div2 все равно показывается.

<style>
div#div2 + div#div1:empty {display: none;}
</style>

<div id="div2">title</div>
<div id="div1">111</div>

[Олег]

fOstere,

[Rustam Bainazarov]

fOstere, потому, что div2 в такой структуре для CSS не существует, потому что он идёт до div1. CSS идти выше по коду не может.