Selectores CSS (Parte 1)
5 minutos de lectura
Fecha: 15/1/2015
Programar en CSS es bastante sencillo, pero por su sencillez y linealidad en ocasiones perdemos potencia, es por eso que nacieron los selectores, estos nos proporcionan mayor flexibilidad cuando programamos los estilos de la página, a día de hoy no saber usarlos es un pecado.
¿Qué cosas podemos hacer con ellos?
Pues de todo, desde referenciar a los elementos según sus ids clases o atributos, disparar estilos en función de algún estado o evento, recorrer el dom (de forma muy básica, que nadie se espere la capacidad de Jquery) para acceder a elementos, utilizar comodines…
Como se aprecia en este resumen la diferencia entre usarlos o no es abismal, pero donde la vais a apreciar por completo es cuando vayáis a programar, como me parece que es tan relevante para un diseñador web voy a dedicar el post a resumiros su uso, y lo voy a hacer en el mismo orden con el que arriba resumía sus posibilidades…
En primer lugar mencionaba que podemos referenciar los elementos según ids, clases y atributos, estoy seguro que los dos primeros los conocéis, tal vez sea esto último de los atributos lo más novedoso, de todas formas veamos los tres casos:
(#XXX) Selector de id
Si tuviéramos un elemento como este <div id="cajadetexto">…</div> para asignarle estilos usaríamos este selector en nuestra hoja de estilos…
#cajadetexto{
float:left;
padding:10px;
margin:20px;
background-color:#FFF;
font-size:16px;
color:#333;
text-aling:center;
}
(.XXX) Selector de clases
En este caso supongamos que tenemos un párrafo <p class="textoresaltado">…</p> para asignarle estilos a través de la clase que tiene el selector es este…
.textoresaltado{
text-transform:uppercase;
font-weight:bold;
font-size:18px;
color:#000;
text-aling:left;
}
(XXX[atr]) Selector de atributos
Tal y como mencionábamos al principio esta tal vez sea la manera más novedosa de seleccionar un elemento y las posibilidades son infinitas ya que puede definirse el contenido del atributo, combinarse usando los comodines o ampliar su capacidad con atributos propios (que es otra novedad en CSS3).
Pero como vamos poco a poco comencemos por la forma más básica:
a[title]{
text-decoration:underline;
color:#F00;
}
Estos estilos se aplicarán a todas las etiquetas a (las etiquetas de link) que tengan un atributo title, si no lo tienen no hace nada.
Veamos ahora el mismo ejemplo pero definiendo el contenido del atributo, en este caso voy a usar el href (que marca a donde apunta el link).
a[href="www.oscarlijo.com"]{
text-decoration:underline;
color:#00F;
}
De esta manera todos los links que apunten a la dirección www.oscarlijo.com heredan esos estilos.
Sin embargo gracias a los comodines esto aún puede ser mucho más flexible, vamos a ver cómo se comportan.
Con el comodín (*)
Este comodín es como decir “que contenga en algún lado…”
a[href*="oscar"]{
text-decoration:underline;
color:#00F;
}
Con este asterisco que añadí vengo a decir que aplique los estilos a todas las etiquetas a que apunten en su atributo href a cualquier sitio que contenga la palabra “oscar”, es decir, que funcionaria en www.oscarlijo.com pero también en www.oscarlijo.es, www.oscarlijo.org, oscarlijo.com, oscarlopez.com, oscarlopez.es, oscarlijo, oscarl….
Como veis si dentro pilla la palabra “oscar” (da igual que este al principio, al final, lo que tenga escrito alrededor) ya funciona.
Con el comodín (^)
Este comodín es como decir “que comience por…”
a[href^="http"]{
text-decoration:underline;
color:#00F;
}
El símbolo de intercalación comprueba que en este caso el atributo href comience por http, de manera que los estilos que luego escribimos son para las direcciones web http o https, o como si queremos poner httploquesea
Porque como decimos solo evalúa que comience con esos caracteres, lo que vaya después de ellos le es indiferente.
Con el comodín ($)
Este comodín es como decir “que termine por…”
a[href$=".jpg"]{
text-decoration:underline;
color:#00F;
}
Es el otro caso, que acabe en lo que indicamos, en este caso se aplica a las imágenes jpg, porque estamos forzando a que el archivo acabe en “.jpg” y por tanto esta es su extensión.
Sin embargo (aun siendo imágenes) si fueran bmp, gif o png, como ya no terminarían en esa cadena de caracteres, ya no funciona en ellos.
Selectores de Estado
A estos se los conoce como pseudo clases
:hover
Este es el estado de un elemento cuando el cursor se encuentra encima de él.
:active
Se activa cuando el usuario activa un elemento (al clicar) sobre él. Sólo dura desde que el usuario pulsa el botón del ratón hasta que lo suelta, por lo que su duración es mínima y visualmente es un leve parpadeo sobre el elemento.
:focus
Se produce cuando el elemento tiene el foco del navegador, es decir, cuando el elemento está seleccionado. El ejemplo más común es el de pulsar encima de una caja de texto, mientras este seleccionado (se puede escribir en el) este evento está activo y se muestran sus estilos.
:link
Como se muestra un enlace que NO ha sido visitado.
:visited
Como se muestra un enlace ya visitado con anterioridad.
En vista de que pudieran darse casos en que se cumplan varias condiciones sobre el elemento, por ejemplo, que haya sido visitado y al mismo tiempo tengas el cursor encima y además hagas click (condiciones que cumplirían la descripción de :visited :hover y :active), estas pseudo clases tienen un orden, y es el siguiente:
a:link{
text-decoration:none;
color:#000;
}
a:visited{
text-decoration:none;
color:#555;
}
a:hover{
text-decoration:underline;
color:#00F;
}
a:active{
text-decoration:underline;
color:#F00;
}
Como veis no indico :focus, ya que estoy haciendo referencia “a” etiquetas a y no a “inputs” que son los únicos que ganan ese foco.
Y hablando de inputs hay dos tipos de input (el radio button y el checkbox) que tienen un estado particular, este es…
:checked
Como decimos solo afecta a los inputs de tipo radio o check cuando están seleccionados, si la clase fuera input:checked{… afectaría a los dos tipos de elemento, pero combinando lo que aprendimos más arriba en los selectores de atributos, podríamos aplicar estilos distintos según su tipo de esta manera.
input[type=radio]:checked{
font-weight:bold;
}
input[type=checkbox]:checked{
font-style:italic;
}
Hasta aquí la primera entrada acerca de los selectores, en la próxima y última entrada explicaré los que nos faltan, si quieres verla pulsa aquí.