Estos selectores pueden hacer las veces de condiciones, para poder aplicar estilo a determinadas etiquetas HTML, pero sólo si tienen cierto contenido en sus atributos. Un ejemplo para que esté más claro.
a[href="http://www.google.es"] {color:#990000;}
La inclusión de esta línea en nuestra hoja de estilo provocará que todas las etiquetas a (anchor) que tengan un atributo href igual a http://www.google.es, salgan con una letra de color rojo. O lo que es lo mismo, cada vez que creemos un enlace a la página principal de Google, el texto del enlace saldrá en color rojo de forma automática.
Un selector de atributo tiene la forma
ETIQUETA[ATRIBUTO OPERADOR VALOR] {PROPIEDADES}
En el primer ejemplo, la etiqueta sería a, el atributo href, el operador = y el valor la dirección de Google. Las propiedades son las habituales de CSS y en el susodicho ejemplo, el color de fuente.
La posibilidad de usar cualquier etiqueta, atributo y valor, así como una suficiente variedad de operadores, es lo que le da fuerza a esta herramienta. Los operadores son los siguientes y harán que el estilo se ejecute en aquellas etiquetas que tengan un atributo:
= exactamente igual al declarado
input[type="text"] {width: 200px;}
Todos los campos input de formularios que sean del tipo texto, tendrán un ancho de 200px.^= que comienza con los mismos caracteres que el declarado
img[title^="categ"] {padding:5px;border:1px solid #000000;}
Todas las imágenes con un título que empiece por la cadena "categ", tendrán un borde negro con un padding de 5px.$= que termina con los mismos caracteres que el declarado
a[href$="jpg"] {background:#cccccc;}
Los enlaces cuya dirección de destino termine con la extensión jpg, tendrán un fondo gris.*= que contiene los mismos caracteres que el declarado
a[href*="oloblogger"] {font-style:italic;}
Los enlaces cuya URL contengan la secuencia de caracteres "oloblogger", apareceran en cursiva.~= exactamente igual al declarado, de entre todos los valores que contenga el atributo separados por espacios
link[rel~="alternate"] {...}
No se me ocurre ningún ejemplo de estilo para este operador, pero de entre todas las etiquetas link, las propiedades se aplicarían a aquellas que dentro del atributo rel, tuvieran el valor exacto "alternate", como por ejemplo ocurre en <link href="estilo.css" rel="alternate stylesheet" type="text/css">|= al principio de una lista de valores separados por guiones
p[lang|="en"] {color:red;}
Los párrafos con marca de lenguaje inglés (en), se verán en rojo como ocurriría en < p lang="en-US"...Si no especificamos operador y por consiguiente, ningún valor, las propiedades se aplicarán a todos los elementos que tengan el atributo declarado.
span[class] {text-align:justify;}
Todas las etiquetas span que incluyan algún atributo class (independientemente de su valor), mostrarán texto justificado.Por último, las selectores pueden ser "sumados", de manera que el estilo sólo se aplicará si se cumplen todas las condiciones:
div[class="resaltado"][id="fondo"] {background:#ffffff; color:blue; font-weight:bold; }
Si un div tiene simultáneamente la clase y la id indicadas, su contenido se verá con fondo blanco y texto azul en negrita.Algunos operadores corresponden a CSS3, pero en un principio, todos son soportados por Firefox, Chrome, Safari e Internet Explorer a partir de la versión 7.
¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.
Y muchos más artículos interesantes si nos sigues en...
Excelente tutorial, quiero agradecerte porque gracias a este blog pude dejar conforme a mi gusto el mio. Ya que por decir un número el 90% de los cambios que realicé en mi plantilla fueron gracias a este maravilloso blog que cada día nos enseña más. Los invito a que vean lo que pude lograr gracias a oloblogger: pocholog
ResponderEliminarNo conocía los selectores, así que voy a empezar a probarlos en mi blog, me resultan muy interesantes como todo lo que posteas. Mil gracias nuevamente.
No sabia donde poner esta duda que me apetece mucho hacer, perdon las molestias, dejo mi correo por si me podeis echar un cable: cuestiondepalabras@gmail.com
ResponderEliminarEl asunto es este, me gustaria mucho poner en mi blog un boton donde el usuario haga clik y le salga una post, una lectura aleatoria... he visto que hay un enlace: http://oloblogger.blogspot.com/2008/10/problemas-con-posts-aleatorios.html, donde sale el uso de un script, pero soy un poco pinpollo en estas cosas y me estoy iniciando en esto de los blogs, como lo tengo que hacer?, donde copio esta plantilla??
Amigo Oloman,
ResponderEliminarRecurro a ti para hacerte una consulta que puede tener su importancia. Resulta que yo hice un comentario en otro blog y, como había cometido un error, hice un segundo comentario corrigiéndolo. Yo los vi ambos publicados. Más tarde, vuelvo a mirar el blog, y veo que el titular del blog ha corregido mi error en el primer comentario y lo publica con mi nombre de cuenta de Blogger, como si lo hubiera hecho yo, haciendo desaparecer el segundo comentario.
La pregunta es: ¿Existe alguna forma técnica de hacer esto, o es que el autor del blog, que es una persona de fiar, se ha hecho con mi nombre de cuenta y contraseña?
Te estaré sumamente agradecido por tu contestación.
Un cordial saludo,
Antonio
Hola oloblogger pues quiera preguntarte algo haber si me puedes ayudar, quisiera poner mmm algo como lo que esta en este pagina (www.lacovacha.net) o como el de blog de aca mi amigo Pocho, donde salgan noticias asi en imagenes arriba no se como se llamen en el blog de la covacha tiene fondo azul tiene letras y al lado la imagen, No se si sepas o me deba explicar mas?
ResponderEliminarQuisiera saber como poner esa clase de sidebar? :D la verdad al principio si me interesa ponerlo pero si se me hace muy complicado mejor no lo pondre, pero de todos modos quisiera saber como se pone :D
ResponderEliminarPocho, está claro que todo es cuestión de ponerse y dedicarle el tiempo necesario.
ResponderEliminarZilef, en el post que citas se enlaza al original dónde se explica como instalarlo, pero realmente sólo tienes que incorporarlo como nuevo gadget tipo HTML/JavaScript y pegar allí el código, modificando la dirección de tu blog.
Hola Antonio. Hay forma de hacer eso si el blog no es de Blogger. En la mayoría de sitios con alojamiento propio, el administrador tiene control total y puede editar lo que quiera. En Blogger, como decía, no. Otra cosa es que esa persona "de fiar" tenga tus datos y haya borrado el comentario original y creado uno nuevo "en tu nombre". Eso claro que es perfectamente posible.
Mike lo de las noticias rotando no sé ni como se llama, porque aunque cada vez lo veo en más sitios, nunca me he preocupado de ver cómo funciona. Así que no sabría decirte. Con respecto a la sidebar, no sé a cual te refieres.
Yo nunca he tenido la oportunidad de probar con esto, me servirá de mucho para algunos proyectos :D gracias por compartirlo ^^
ResponderEliminar¡Un saludo Oloman!
Pues es algo fantástico, de verdad. A bote pronto, una utilidad que recuerdo ahora mismo es la de personalizar los iconos junto a un enlace según el destino. Y como eso, infinidad de cosas más.
Eliminar