Selectores css de elementos anidados especificos

Que tal, esta duda es simple, según yo es imposible pero espero me desmientan.

Usando css puro, es posible obtener un estilo para elemento que contengan cierto elemento dentro? eg.

Código HTML :

<ul>
<li>Elemento 1</li>
<li>Elemento 2<br />Otra linea</li>
<li>Elemento 3</li>
<li>Elemento 4<br />Otra linea</li>
</ul>

y poder tener un estilo especifico para los <li> que en su interior tengan un <br />

Código HTML :

ul>li {
   padding-top: 15px;
}
ul>li>br li {
   padding-top: 5px;
}

jaja no se. Se que se puede resolver colocando una clase especifica, por ejemplo <li class="tiene-br"> o incluso <li id="li1"> y aplicar estilos específicos, pero bueno si se pudiera hacer como yo lo pregunto, el css y el html se verían mas "elegantes".

Saludos,

No, lamentablemente no existe un selector de CSS que te permita hacer eso, quizas con jQuery se pueda.

Con jQuery si puedes hacerlo

seria algo como esto:

Código HTML :

<style>

.estilo_con_br{
tu estilo.....
}

.estilo_sin_br{
tu estilo....
}
</style>
<ul id="tu_id">
   <li> </li>
   <li> <br/></li>
   <li> </li>
</ul>
<script languaje="javascript">
$(document).ready(function(){
    
    $ul = $("#tu_id");
    $li  = $ul.find("li");

    $li.each(function(){        
        var br  = ($(this).find("br").length == 0) ? false : $(this).find("br");

        if(br){
            $(this).addClass("estilo_con_br");
        }
        else
        {
            $(this).addClass("estilo_sin_br");
        }
    });
});
</script>

saludos

Que tal,

Actualmente uso una técnica similar, pero me lo preguntaba para no depender del js y que fuera css puro. Esperemos que se les ocurra para CSS4, sería de mucha utilidad.

en realidad esto se pordría resolver de la siguiente forma con css

li br {
el estilo que quieras aplicar al tag <br> que se encuentre dentro de un <li>
}

solo se aplicará a los tags <br> que se encuentren dentro de un <li>

espero que les sirva.

Salu2

La pregunta es aplicarle estilo a los elementos LI que tengan un BR, no a los BR dentro del elemento LI, lo cual al parecer solo puede ser resuelto con jquery si se quiere que sea dinámico.

Saludos,

Empecemos por el principio: No es buena idea usar <br />, no deberías usar elementos de HTML para afectar el modo de presentación, eso corresponde a CSS. En tal caso, podrías colocar el texto que quieres en la línea siguiente dentro de un span, y darle formato a ese span (display:block para que se coloque en la siguiente línea, por ejemplo)

The Fricky! escribió:

The Fricky! escribió:

Cuando citas el ultimo mensaje, te borra lo que escribiste y lo envía así. BUG

Lo que escribí fue que trate de hallar una solución con css puro para cuando dentro del elemento li existieran textos con saltos de linea o muy largos, pues traía line-height especifico para centrar verticalmente, el background no era un color solido y créeme todo se complicaba, lo explique muy bien hace rato pero se borro y bueno, entiendo tu punto y no era una solución a este caso particular, al final se resolvió con jQuery.

Saludos.

Creo que merezco un batazo del BOFH por dejar esos mensajes ahí y no borrarlos, pensé que se podían borrar después

porque no usas child?

ilústrame