selectores - selector de hijos css

: vacío problema de pseudo clase con contenido agregado/eliminado y combinadores de hermanos

Question

Estoy tratando de establecer el estilo para un <div> después de un <ul> vacío.

Este es un código simple que estoy probando actualmente: (OS es win7)

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: (no es relevante para el problema, solo para propósitos de prueba)

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

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

Comportamiento esperado:

En todos los navegadores principales, al agregar un elemento a <ul> , el conjunto de estilos para <ul> vacío que sigue a <div> no se debe aplicar. Al eliminar todo <li> , el estilo debe volver a aplicarse a <div> dirigido.

Comportamiento actual:

• Firefox lo maneja sin problema, obtén el resultado esperado.
• Chrome elimina el color rojo para seguir el DIV cuando UL ya no está vacío, pero no lo vuelve a aplicar cuando UL está vacío otra vez (eliminando todos los LI de UL)
• IE10 / 11 simplemente aplica CSS :empty pseudo-clase como por defecto, no reacciona a ningún contenido agregado o eliminado

Busqué en Google, he encontrado algunas soluciones alternativas, pero la mayoría parece estar desactualizada y no hay ningún problema de solución aquí, ninguna que no pueda encontrar al menos.

Para Chrome, he encontrado que establecer una regla de CSS :empty para UL lo corrige, pero realmente no sé qué está pasando : ul:empty {} (¿¡esta es una regla de CSS vacía ?!) <- I ¿Supongo que ahora obliga a una UI a pintar en Chrome ?

Desafortunadamente, esto no corrige el comportamiento en IE10 / 11.

¿Alguien sabe cómo hacer que funcione en todos los principales navegadores?

ACTUALIZACIÓN 1:

Parece que el error está relacionado con el siguiente selector de hermanos + , incluso usar ~ no da un resultado consistente en Chrome. Pero si se aplica el estilo directamente a :empty elemento :empty , todo parece funcionar correctamente en todos los navegadores: http://jsfiddle.net/EyEa7/ Pero mi objetivo aquí es apuntar al elemento hermano de :empty elemento :empty , no directamente al elemento vacío.

ACTUALIZACIÓN 2:

Forzar un redibujado de la UI lo corrige en todos los navegadores, por ejemplo, usando $(''body'').hide().show(0); Una vez que el contenido ha sido actualizado: Ver DEMO forzando el redibujado

Pero realmente apreciaría una solución que no involucre ningún código javascript.

La pregunta ahora podría ser:

• ¿Cómo puedo forzar IE10 / 11 para volver a pintar la interfaz de usuario utilizando solo CSS? (Esperando que esta sea una pregunta relevante con respecto a este tema)

Answer 1

Algo como esto funcionará, pero no es particularmente bonito:

ul:empty {}

ul:empty + div {
    color: red;
}

ul + div {
    animation: repaint 1000s infinite linear;
}

@keyframes repaint {
    from { zoom: 1; }
    to { zoom: 0.99999; }
}

Ver: http://jsfiddle.net/vd2Hx/

Probado en Chrome, Firefox, Safari, Opera e IE.