Comunidad de diseño web y desarrollo en internet online

Selectores css de elementos anidados especificos

Citar            
MensajeEscrito el 29 Mar 2011 07:03 pm
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;
}


xD 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,

Por LongeVie

Claber

1741 de clabLevel

1 tutorial

Genero:Masculino  

En un lugar, re moto.

chrome
Citar            
MensajeEscrito el 29 Mar 2011 08:28 pm
No, lamentablemente no existe un selector de CSS que te permita hacer eso, quizas con jQuery se pueda.

Por Ramm

BOFH

3152 de clabLevel

6 tutoriales
8 articulos

Genero:Masculino   Bastard Operators From Hell REC Héroes

London, UK

firefox
Citar            
MensajeEscrito el 29 Mar 2011 09:32 pm
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

Por jOina

Claber

359 de clabLevel

2 tutoriales

 

Guadalajara, Mexico

firefox
Citar            
MensajeEscrito el 30 Mar 2011 01:58 am
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.

Por LongeVie

Claber

1741 de clabLevel

1 tutorial

Genero:Masculino  

En un lugar, re moto.

chrome
Citar            
MensajeEscrito el 05 Jun 2012 02:59 pm
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

Por chelocuervo

0 de clabLevel



 

firefox
Citar            
MensajeEscrito el 05 Jun 2012 05:00 pm
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,

Por LongeVie

Claber

1741 de clabLevel

1 tutorial

Genero:Masculino  

En un lugar, re moto.

chrome
Citar            
MensajeEscrito el 06 Jun 2012 02:37 am
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)

Por The Fricky!

Presidente

6168 de clabLevel

3 tutoriales
8 articulos

Genero:Masculino   Bastard Operators From Hell Héroes

Piccola Venezia...

firefox
Citar            
MensajeEscrito el 06 Jun 2012 02:56 am

The Fricky! escribió:

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)

Por LongeVie

Claber

1741 de clabLevel

1 tutorial

Genero:Masculino  

En un lugar, re moto.

chrome
Citar            
MensajeEscrito el 06 Jun 2012 03:03 am

The Fricky! escribió:

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)

Por LongeVie

Claber

1741 de clabLevel

1 tutorial

Genero:Masculino  

En un lugar, re moto.

chrome
Citar            
MensajeEscrito el 06 Jun 2012 03:07 am
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.

Por LongeVie

Claber

1741 de clabLevel

1 tutorial

Genero:Masculino  

En un lugar, re moto.

chrome
Citar            
MensajeEscrito el 06 Jun 2012 03:09 am
Creo que merezco un batazo del BOFH por dejar esos mensajes ahí y no borrarlos, pensé que se podían borrar después :S

Por LongeVie

Claber

1741 de clabLevel

1 tutorial

Genero:Masculino  

En un lugar, re moto.

chrome
Citar            
MensajeEscrito el 06 Jun 2012 06:50 am
porque no usas child?

Por Eclypse

Claber

118 de clabLevel



 

firefox
Citar            
MensajeEscrito el 06 Jun 2012 08:27 am
ilústrame

Por LongeVie

Claber

1741 de clabLevel

1 tutorial

Genero:Masculino  

En un lugar, re moto.

chrome

   Página 1 de 1

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.