Un selector CSS para obtener el último div visible

Hay una solución css pura (CSS3) si su div está oculto usando el atributo "style"

div:not([style*="display: none"]):last-child{ /* bla */}

Tenga en cuenta el espacio entre "display:" y "none", si no puede decir exactamente si hay un espacio en el atributo o no, puede hacer el selector de esta manera:

div:not([style*="display:none"]):not([style*="display: none"]):last-child{ /* bla */}

JQuery es rey, pero las soluciones de CSS3 son dios

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

Creo que no es posible seleccionar por un valor css (display)

Editar:

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

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

Solución JS pura (eg. cuando no usas jQuery u otro framework para otras cosas y no quieres 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 /

Si puedes usar estilos en línea, entonces puedes hacerlo puramente con CSS.

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

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

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

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

* reeditado

No es posible con CSS, sin embargo, puede hacerlo con jQuery.

DEMOSTRACIÓN DE 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;
    }

});

Esto funcionó para mí.

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