Я пытаюсь установить стиль для<div> после пустого<ul>.

Это простой код, который я сейчас тестирую: (ОС win7)

Базовый jsFiddle DEMO

HTML:

<button class="btnAdd">add new LI</button>
<button class="btnRemove">remove last LI</button>
<ul></ul>
<div>Should be red if UL is empty</div>

CSS:

ul:empty + div {
    color:red;    
}

JQuery: (не относится к проблеме, только для целей тестирования)

$('.btnAdd').on('click', function () {
    $('ul').append('<li>LI</li>');
});

$('.btnRemove').on('click', function () {
    $('ul').find('li').last().remove();
});

Ожидаемое поведение:

Во всех основных браузерах при добавлении элемента в<ul>, стиль установлен для пустого<ul> следующий<div> не должен применяться При удалении всего<li>, стиль должен быть применен к целевой<div>.

Текущее поведение:

Fire Fox справится с этим без проблем, получи ожидаемый результат.Хром удаляет красный цвет для последующего DIV, когда UL больше не пуст, но не применяет его повторно, когда UL снова пуст (удаляя все LI из UL)IE10 / 11 просто примените CSS:empty псевдокласс как по умолчанию, не реагирует ни на какой добавленный или удаленный контент

Погуглив, я нашел некоторые обходные пути, но большинство из них устарели, и здесь нет ни одной проблемы, ни одной, по крайней мере, я не могу найти.

Что касается Chrome, я обнаружил, что установка правила CSS:empty для UL это исправляет, нона самом деле я не знаю, что происходит: ul:empty {} (да, это пустое правило CSS ?!)<- Я думаю, теперь это заставляет перерисовывать пользовательский интерфейс на Chrome ?!

Исправлено jsFiddle для хрома

К сожалению, это не исправляет поведение в IE10 / 11.

Так что кто-нибудь знает способ заставить его работать на всех основных браузерах ???

ОБНОВЛЕНИЕ 1:

Похоже, ошибка связана с выбором следующего брата+, даже используя~ не дает последовательного результата на хром. Но если применить стиль непосредственно к:empty element, все работает корректно во всех браузерах:http://jsfiddle.net/EyEa7/ Но моя цель здесь состоит в том, чтобы нацелить элемент родного брата:empty элемент, а не пустой элемент напрямую.

ОБНОВЛЕНИЕ 2:

Принудительное перерисовывание пользовательского интерфейса исправляет его во всех браузерах, например, используя$('body').hide().show(0); после обновления контента:Посмотрите ДЕМО принудительно перерисовать

Но я был бы очень признателен за исправление, не включающее JavaScript-код.

Вопрос теперь может быть:

Как я могу заставить IE10 / 11 перекрашивать пользовательский интерфейс, используя только CSS? (надеясь, что это актуальный вопрос по этому вопросу)