Un selector de CSS para obtener el último div visible

Una pregunta difícil sobre el selector de CSS, no sé si es posible.

Digamos que este es el diseño HTML:

<div></div>
<div></div>  
<div></div>  
<div style="display:none"></div>
<div style="display:none"></div>  

Quiero seleccionar el último div, que se muestra (es decir, no display:none), que sería el tercero diven el ejemplo dado. Eso sí, el número de divs en la página real puede diferir (incluso display:nonelos).

Puede seleccionar y diseñar esto con JavaScript o jQuery, pero CSS solo no puede hacer esto.

Por ejemplo, si tiene jQuery implementado en el sitio, puede hacer lo siguiente:

var last_visible_element = $('div:visible:last');

Aunque es de esperar que tenga una clase / ID envuelta alrededor de los divs que está seleccionando, en cuyo caso su código se vería así:

var last_visible_element = $('#some-wrapper div:visible:last');

La verdadera respuesta a esta pregunta es que no puedes hacerlo. Las alternativas a las respuestas solo de CSS no son respuestas correctas a esta pregunta, pero si las soluciones JS son aceptables para usted, entonces debe elegir una de las respuestas JS o jQuery aquí. Sin embargo, como dije anteriormente, la respuesta correcta y verdadera es que no puede hacer esto en CSS de manera confiable a menos que esté dispuesto a aceptar el :notoperador con [style*=display:none]y otros selectores negados, que solo funciona en estilos en línea, y es un pobre en general solución.

Si puede usar estilos en línea, puede hacerlo únicamente con CSS.

Estoy usando esto para hacer CSS en el siguiente elemento cuando el anterior es visible:

div [style = 'display: block;'] + table {
  filtro: desenfoque (3px);
}

Creo que no es posible seleccionar por un valor CSS (pantalla)

editar:

en mi opinión, tendría sentido usar un poco de jquery aquí:

$('#your_container > div:visible:last').addClass('last-visible-div');

Solución JS pura (por ejemplo, cuando no utiliza jQuery u otro marco para otras cosas y no desea descargarlo solo para esta tarea):

<div>A</div>
<div>B</div>  
<div>C</div>  
<div style="display:none">D</div>
<div style="display:none">E</div>    

<script>
var divs = document.getElementsByTagName('div');
var last;

if (divs) {
    for (var i = 0; i < divs.length; i++) {
        if (divs[i].style.display != 'none') {
            last = divs[i];           
        }
    }
}

if (last) {
    last.style.background = 'red';
}
</script>

http://jsfiddle.net/uEeaA/90/

Tratar

div: not ([style * = "display: none"])

de otra manera, puedes hacerlo con javascript, en Jquery puedes usar algo como:

$('div:visible').last()

*re-editado

No es posible con CSS, sin embargo, podría hacerlo con jQuery.

DEMO JSFIDDLE

jQuery:

$('li').not(':hidden').last().addClass("red");

HTML:

<ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li class="hideme">Item 4</li>    
</ul>

CSS:

.hideme {
    display:none;
}

.red {
    color: red;
}

jQuery (solución anterior):

var $items = $($("li").get().reverse());

$items.each(function() {

    if ($(this).css("display") != "none") {
        $(this).addClass("red");
        return false;
    }

});

Si ya no necesita los elementos ocultos, simplemente use en element.remove()lugar de element.style.display = 'none';.

Esto funcionó para mí.

.alert:not(:first-child){
    margin: 30px;
}