JMiur [E]

Otros selectores que podemos usar y que se combinan con los pesudo-elementos.

El asterisco (*) es llamado un selector universal selector, por ejemplo, si colocamos lo siguiente al inicio de nuestras declaraciones CSS:
* {margin: 0; padding: 0;}
Eliminaremos los márgenes y paddings que colocan los navegadores en las etiquetas.

Cuando una etiqueta está dentro de otra, se dice que la etiqueta contenedora es el elemento padre (parent) y la etiqueta contenida es el elemento hijo (child). Por eso, siguiendo esta analogía, en CSS se habla de la herencia, es decir, ciertas propiedades definidas en el elemento padre, se "transmiten" al hijo. Por ejemplo:
<div style="color: green;">
<p> ... un texto ...</p>
</div>
En este caso, el DIV es el padre y el párrafo P es el hijo. El párrafo se verá verde porque hemos definido que el DIV tenga color verde y esta propiedad es heredada.

El texto se verá de color verde.


No todas las propiedades se heredan así que también existen pseudo-elementos que nos permiten definir estas cosas con mayor exactitud.

Usando el símbolo < indicamos que cierta propiedad se aplicará sobre los elementos hijo. Por ejemplo si tenemos esto:
div#ejemplo b {color:lightblue;}

<div id="ejemplo">
<p>El texto se verá de color <b>azul claro</b>.</p>
Y este otro <b>también</b>.
</div>
Cualquier etiqueta B dentro de ese DIV se verá de color azul:

El texto se verá de color azul claro.

Y este otro también.

En cambio, ya sea usando esto:
div#ejemplo p b {color:lightblue;}
o esto:
div#ejemplo p > b {color:lightblue;}

<div id="ejemplo">
<p>El texto se verá de color <b>azul claro</b>.</p>
Pero este otro no <b>aunque esté en negrita</b>.
</div>
Sólo serán azules los que estén dentro de una etiqueta P.

El texto se verá de color azul claro.

Pero este otro no aunque esté en negrita.

El símblo más + lo usamos para indicar a un elemento inmediatamente adyacente:
p.ejemplo + p  {color:yellow;}

<p class="ejemplo">Este es un párrafo cualquiera.</p>
<p>Este es el párrafo adyacente al anterior.</p>
<p>Este no es el párrafo adyacente.</p>

Le estamos diciendo que, el párrafo que inmediatamente sigue a uno al que tiene la clase ejemplo, sea de color amarillo y todos los demás no.

Este es un párrafo cualquiera.

Este es el párrafo adyacente al anterior.

Este no es el párrafo adyacente.


Parece complicado y de alguna manera lo es. Probablemente, más interesante y útil es definir propiedades en función de los atributos de una etiqueta. Por ejemplo, si tuvieramos esto:
a {color:yellow; font-size: 20px;}
a[title] {color:red;}

<p>
Este enlace no tiene title y es <a href="#">amarillo</a>
Como este otro enlace tiene title es <a href="#" title="El enlace rojo">rojo</a>
</p>
Lo que veríamos es que todos los enlaces que tengan el atributo title en la etiqueta tendrían un color distinto:

Este enlace no tiene title y es amarillo

Como este otro enlace tiene title es rojo


Esos atributos pueden definirse de manera aún más precisa. En este caso, sólo si el enlace tiene esa dirección URL determinada tendrá el color indicado.
a[href='http://gemablog-.blogspot.com/'] {color:salmon;}

Este es un enlace a ninguna parte

Este es un enlace a Gema Blog


Si en lugar del símbolo igual (=) usamos ~=, los que se mostrarán en ese color son todos aquellos enlaces que estén contenidos en una lista separada por espacios:
a[href='http://gemablog-.blogspot.com/ http://elescaparatederosa.blogspot.com/'] {color:salmon;}
También podríamos establecer más de un atributo, de esta manera, se mostrará de cierto color los enlaces si además, tienen el atributo títle.
a[href='http://gemablog-.blogspot.com/'][title] {color:salmon;}
Combinando esto con content, podrían hacerse cosas interesantes:
a[href='http://gemablog-.blogspot.com/'] {color:salmon;}
a[href='http://gemablog-.blogspot.com/']:after {content: url(unaImagen);}

Este es un enlace a ninguna parte

Este es un enlace a Gema Blog


REFERENCIAS:w3.org

15 comentarios:

Shark_Bloody  

Este, obviamente, es muchisimo mas interesante que el primero, con un poco de maña nos podemos ahorrar un montón de código. :)

JMiur ¿Sabes algo de?: "Contenido exclusivo en los Feeds" en Blogger, porque lo eh visto en Wordpress, pero no encuentro nada para nuestra plataforma. :O

Lo vi de casualidad en el Blog de Pizcos, espero que no sea solo un truco de marketing :D

Responder
Carlos Martínez  

Muy buena explicación, me saco de una duda, estoy aprendiendo CSS, gracias.

Responder
MALINA  

Hola JMiur, otra vez por aquí para no perder la costumbre.

Tengo un problemilla, y es que me aparecen unos caracteres por encima del header aunque a simple vista no se ve me desplaza el header un parrafo
los caracteres son: --> y por más que yo he buscado no he conseguido dar con ellos, también expandiendo plantilla antes del div del header no veo nada. Solo se ve si se selecciona, te hice una captura para que lo compruebes.
http://i270.photobucket.com/albums/jj88/malinamaniac/CONEC.jpg

me ocurre en conectablog y en este blog de pruebas http://conectablog3.blogpsot.com donde estoy probando la misma plantilla pero donde estoy realizando cambios para aplica un nuevo diseño en conectablog.

Ojalá tu des con donde estan esos dichosos caracteres.

Responder
JMiur  

Shark_Bloody: Imagino que eso es algo colocado de manera manual, la verdad, desconozco el tema. En WP es posible porque se pueden manipular los archivos pero en Blogger no veo cómo hacerlo de forma más o menso automática.

Carlos: Me alegro que te sea útil.

Responder
Gem@  

Que bárbaro!! otra entrada más a guardar.
J.Miur ¿no has pensando en publicar un libro con las entradas publicadas sobre css y html? ¿has oído hablar de Google Blogger For Dummies? es una guía básica para los que empiezan en Blogger ¿pero qué ocurre para los que ya pasamos por la fase de editar una entrada y añadir los archivos?
Piénsalo, creo que tendría mucha aceptación :)

Con tu permiso J.Miur miré por curiosidad la captura que deja MALINA eso que busca está justo sobre la información sobre la plantilla, debe buscar esto: <!--

Responder
Bonzu Pipinpadaloxicopolis III  

Hola JMiur, adiós, este fue un pseudo-saludo.

Responder
JMiur  

Gem@: La verdad, siempre tuve ganas de organizar todo esto alguna vez pero, por ahora, me aguanto las ganas ¡Es que es un lio bárbaro :D !

Bonzu: Pseudo-recibido :D

Malina: En este caso, no se trata de un símbolo que sobra o que quedó mal cerrado y por eso, no lo vas a encontrar. Lo que ocurre es que has colocado una etiqueta <style> </style> dentro de la etiqueta <b:skin> </b:skin> y entonces, estás haciendo que el navegador "corte" lo que debe leer y de allí en adelante ciertas propiedades no funcionen y se muestren esos caracteres.

Elimina la apertura y el cierre: <style>y </style> de allí.

<b:skin> y </b:skin> son el equivalente de <style>y </style>

Dentro de <b:skin> ..... </b:skin> jamás se colocan otras etiquetas de ninguna clase.

elpoetaborracho  

Ja, tuve un problema smilar hace poco y me volví un poco loco, porque me daba un error y no veía la vista previa, al final hice un apaño con una plantilla guardada y lo arreglé, pero como me hubiera gustado hacerlo.

Por cierto, decir que puede que en breve te pregunte alguna cosilla por otro de tus post, aquí he llegado buscando info sobre :focus, pero parece que por aquí no está, habra que seguir mirando.

Responder
Gem@  

:O Sorry.. ¿Entonces lo que yo vi que quedaba sin cerrar ?

Responder
MALINA  

Perfecto!

te digo que llevaba meses peleando con eso y no daba con la forma de quitar los caracteres.

Viva la madre que te pario! Hala!

Responder
JMiur  

Me laegra que se solucionara, Malina :D

Gem@: Lo que viste es correcto pero, en este caso, eso lo generaba el error de tener la etiqueta STYLE dentro de B:SKIN. El navegador malinterpretaba donde terminaba la etiqueta y entonces, transformaba el CDATA final en eso.

Responder
Anahi  

JMiur, tengo una dos intrigas que me carcomem:
¿Qué diferencia hay entre #(numeral) y .(punto).
¿Y para qué sirven las "variables"? (digo, ¿qué pasaría si las borro...? -les tengo ganas-) :S

Responder
JMiur  

Anahi:

#(numeral) identifia un ID y .(punto) una clase. Son dos cosas similares pero diferentes. Fíjate en esta entrada a ver si eso aclara las dudas.

¿Qué pasaría eliminando las variables? Si la plantilla utiliza esas variables, dejarían de funcionar. Revisa si lo hacen, se muestran con el signo $ delante. Segundo, dejaría de funcionar la posibilidad de cambiar fuentes y colores desde las opciones de Diseño. Fuera de esto, no pasaría nada más, si uno quiere, pueden eliminarse o modificarse manualmente

Responder
Anahi  

Hracias, JMiur, está claro, mejor no las borro.
Salu2.

Responder
JMiur  

Mmmmmm mejor :D Digamos que no ganas nada eliminándolas.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR