aplicar css a texto pero no a imagen

garciasanchezdani · #1 (**permalink**) 08/03/2012, 05:36

Hola a tod@s, me explico

Estoy trabajando con joomla, y me he creado una nueva posición en mi template, y ahora quiero diseñar esa posición.

Código HTML:

Ver original<div id="posicion_area_central">
<p>mucho texto mucho texto mucho texto mucho texto mucho texto </p>
<p>
<img height="225" border="0" width="218" src="/joomla/templates/beez/images/img_blackberrys.png">
</p>
</div>

Quiero aplicar un css a p y otro css a img
Para la imagen lo tengo:

Código CSS:

Ver original#posicion_area_central img
{
    //css
}

Pero no sé cómo darle estilo al p excluyendo las imágenes...

Saludos y gracias de antemano, Daniel

Naahuel · #2 (**permalink**) 08/03/2012, 06:42

¿Pero has intentado aplicar los estilos?

Si no querés que la imagen herede algún estilo en particular, lo más fácil de hacer es sobreescribir esa regla con un selector de mayor peso, o de igual peso pero que venga después:

Código CSS:

Ver original#posicion_area_central p
{
    //css para el parrafo
   display:block;
}
#posicion_area_central img
{
    //css para la imagen en esos parrafos
   display:inline;
}

Sería lo más compatible con cualquier tipo de navegador. Te puse el ejemplo de la propiedad display para que veas cómo se sobreescribe, pero esa propiedad no la heredaría la imagen de todas formas así que no es para nada necesario hacer eso.

No se me ocurre una propiedad que necesites aplicarle a un párrafo que pueda ser heredada por la imagen y dar problemas... ¿Cuales en particular necesitás que te están dando problemas?

garciasanchezdani · #3 (**permalink**) 08/03/2012, 06:46

Hey Naahuel, gracias por tu ayuda.
Pero ese código ya lo he probado y no funciona, porque la imagen está contenida en un p, y al aplicar el estilo al p, se aplica al p de la imagen.
Necesitaría saltarme el p y aplicarlo directamente a la imagen....

Naahuel · #4 (**permalink**) 08/03/2012, 07:04

Entonces no se trata de estilos heredados, sino que querés que al <p> que contiene una <img> no se le apliquen esos estilos?

Eso es complicadísimo de lograr, pues requeriría de un selector CSS para determinar el elemento padre y tal cosa no existe, aunque ha sido propuesta.

Lo único que puedo sugerirte es que veas la forma de implementarle una clase al párrafo que contiene una imágen, de esta forma:

Código HTML:

Ver original<!doctype html>
<html>
<head>
    <title>Css test</title>
    <style type="text/css">
    <!--
        p{
            border:1px solid black;
        }
        .parrafo-imagen{
            border:0;
        }
    -->
    </style>
</head>
<body>
    <p>Lorem ipsum dolor sit amet, iubet per te princeps audito sed, longa ferri Lorem post autem Apolloni figitur acquievit. Inquisivi ecce codicellis periclitemur nulla facilius de tuae designaverant ut libertatem non solutionem invenisti, quique non ait regem Boreas ingreditur ad quia ei. Respondens sed eu fides piissimi deo hanc. Patris inaudita sanctae facer possimus undecim anno laeti ergo Apollonius mihi. His domino nostrud exercitu necessitate me vero cum.</p>
    <p>Lorem ipsum dolor sit amet, iubet per te princeps audito sed, longa ferri Lorem post autem Apolloni figitur acquievit. Inquisivi ecce codicellis periclitemur nulla facilius de tuae designaverant ut libertatem non solutionem invenisti, quique non ait regem Boreas ingreditur ad quia ei. Respondens sed eu fides piissimi deo hanc. Patris inaudita sanctae facer possimus undecim anno laeti ergo Apollonius mihi. His domino nostrud exercitu necessitate me vero cum.</p>
    <p class="parrafo-imagen"><img src="http://placehold.it/200x200" alt="" title="" /></p>
    <p>Lorem ipsum dolor sit amet, iubet per te princeps audito sed, longa ferri Lorem post autem Apolloni figitur acquievit. Inquisivi ecce codicellis periclitemur nulla facilius de tuae designaverant ut libertatem non solutionem invenisti, quique non ait regem Boreas ingreditur ad quia ei. Respondens sed eu fides piissimi deo hanc. Patris inaudita sanctae facer possimus undecim anno laeti ergo Apollonius mihi. His domino nostrud exercitu necessitate me vero cum.</p>
</body>
</html>

Claro que entiendo que eso puede ser complicado de lograr en Joomla.

Como último recurso te diría que podés usar Javascript para ver qué <p>'s tienen <img> y a esos asignarles una clase, la cual tendría determinados estilos en el CSS.

Tal vez ayude mejor a resolver tu problema si nos dijeras cuales estilos necesitás, a lo mejor hay otra forma!