Tipos de selectores
Existen varios tipos de selectores, veamos los más utilizados.
Selector de elemento: Se relaciona con los elementos de ese tipo existentes en el documento xhtml.
Selector id: Se relaciona con aquel elemento xhtml cuyo valor del atributo “id” sea igual al nombre del selector.
Selector de clase: Se relaciona con aquellos elementos o fragmentos de xhtml cuyo valor de atributo “class” sea igual al nombre del selector.
Selectores contextuales: Se relaciona con aquellos elementos o fragmentos de xhtml que además de coincidir en tipo de elemento, o nombre, también coincidan en el contexto de ascendientes especificado en el selector.
Selector de atributo: Se relaciona con aquellos elementos o fragmentos de xhtml que contengan un tipo determinado de atributo, o un tipo de atributo y un valor específico para el mismo.
Selector de elemento o etiqueta
Un selector de elemento consta de la etiqueta o elemento que representa, seguido de las reglas de estilo que se le aplicarán.
Presenta la siguiente forma:
selector de elemento { reglas de estilo }
El selector “h1” del ejemplo siguiente indica que se aplicará un color de texto azul para toda etiqueta o elemento “h1” del documento xhtml.
h1 { texto azul; }
Selector de clase
El selector de clase consta del nombre que hayamos elegido, precedido de un punto, y a continuación entre llaves pondremos las reglas de estilo que se aplicarán a todo elemento o fragmento xhtml identificado con el mismo nombre en su atributo “class”.
.nombre { reglas de estilo; }
Eneste caso un solo selector puede relacionarse con varios elementos o fragmentos de xhtml identificados con ese nombre de clase, tal como se muestra en la siguiente imagen.
Selector "id"
Este selector es de la forma siguiente:
#nombre { reglas de estilo; }
Nos permite aplicar estilo a una única parte del documento identificada por un atributo id cuyo valor sea el nombre del selector.
Se diferencia del selector de clase en que la relación entre el selector y el fragmento del mismo nombre es 1:1, un selector apunta a un único fragmento de xhtml.
Una de sus aplicaciones más frecuentes es dar estilo a las partes principales en que se divide un documento.
Selectores contextuales
Otra de las formas de acceder a un elemento para aplicarle reglas de estilo es indicar el elemento y el contexto en el que se encuentra. Concretamente la forma que tienen estos selectores es la siguiente:
Contexto elemento { reglas; }
Por contexto del elemento entendemos el orden de ascendientes en los que se encuentra el elemento objetivo.
Ejemplo de selector contextual:
#cuerpo ul.noticias li { borde naranja; }
Este selector presentará con borde de color naranja todo elemento de lista “li” cuyo ascendiente sea una lista “ul” de clase noticias, que a su vez se encuentre dentro del fragmento de bloque <div id=”cuerpo” ...
Debemos tener en cuenta que un selector contextual es mucho más específico que un selector simple, ya que aquí indicamos el elemento y también dentro de que elementos ascendientes se encuentra.
Por lo tanto, para un elemento determinado, las reglas de estilo definidas en su selector contextual prevalecerán sobre las reglas definidas en el selector simple o genérico, y por supuesto también prevalecerán sobre las que pudiese heredar de sus ascendientes.
Esto significa que aunque tuviésemos un selector de elemento de lista “li” definido con borde azul de forma genérica para todo el documento, seguirá mostrándose con borde naranja cuando se encuentre dentro del contexto especificado anteriormente.
Dicho textualmente parece más complejo de lo que es, veamos un ejemplo esquemático.
Selectores de atributo
Este selector presenta la siguiente forma:
Selector[atributo=”valor”] {Reglas de estilo;}
Ejemplo: a[title~=”Oberta”] {Borde azul; }
De este modo enmarcaremos en azul todo enlace cuyo atributo “title” contenga la palabra “Oberta”. Si solo hubiéramos puesto el signo igual, el selector buscaría enlaces cuyo title tuviese solo la palabra “Oberta”.
Veamos un ejemplo en el siguiente fragmento de xhtml:
<a href="http://www.uoc.edu/web/esp/index.html" target="_blank" title="Universidad Oberta de Catalunya">Universidad Oberta de Catalunya</a>
*Debe aclararse que Internet Explorer 6 aun no funciona correctamente para este tipo de selector. Se ha incluido excepcionalmente en este tutorial, ya que todo lo demás tiene un buen soporte en los principales navegadores.
Repaso de conceptos
Hasta ahora hemos visto varios tipos de selectores, o lo que es lo mismo, varias formas de acceder a un elemento del xhtml para especificar como debe mostrarse su contenido mediante reglas de estilo.
No son los únicos que hay, pero son suficientes para hacer una web bien maquetada mediante css.
Selectores de elemento: Indican directamente el elemento sobre el que se aplicarán las reglas.
Selectores “id”: Indican a que único fragmento del xhtml se aplicarán las reglas de estilo.
Selectores de clase: Mediante un nombre identifican a que elementos o fragmentos del xhtml se les aplicarán las reglas de estilo.
Selectores contextuales: Indican a que elementos y dentro de que contexto se aplicarán las reglas.
Selectores de atributo: Identifican al elemento objetivo de las reglas de estilo en función del tipo y valor de sus atributos.
Agrupamiento por coincidencia de estilos
Algo con lo que podemos reducir el tamaño de nuestra hoja de estilo es tener en cuenta que los selectores se pueden agrupar para compartir reglas comunes.
La sintaxis es como se muestra en el ejemplo, separándolos por comas y añadiendo las reglas entre llaves como si se tratase de un solo selector.
Para aprovechar bien esta característica en favor de una hoja de estilo más ligera, debemos observar qué elementos comparten reglas comunes, un mismo color de texto, de fondo, tipo de fuente, etc, excluyendo siempre las que sean heredadas, y finalmente los agrupamos del siguiente modo:
H1, h2, p { fondo blanco;
Texto marrón;
Borde inferior;
}
Sintaxis correcta en selectores parecidos
Conviene tomar algunas precauciones ante selectores que en su sintaxis pueden parecerse mucho, mientras que funcionalmente son muy distintos.
Debemos saber interpretar casos como el siguiente ejemplo:
Aunque se parecen visualmente, no son lo mismo:
li.nombre1 { texto azul; } li .nombre1 { texto naranja; }
La diferencia visual entre ambos es casi imperceptible, tan solo es un espacio en blanco situado entre “ul” y el punto del segundo caso.
El primero es un selector de clase que actúa sobre un único tipo de elemento. Y el segundo es un selector de clase que actua sobre cualquier elemento dentro de un contexto. La diferencia funcional entre ambos es considerable:
En el primer caso aplicamos estilo a elementos de lista "li" que sean de clase “nombre1” .
En el segundo caso aplicamos estilo a elementos de clase “nombre1” que se encuentren dentro del contexto de cualquier "li".
- Elemento de lista
- Elemento de lista de clase nombre 1
- Elemento de lista con fragmento de clase nombre 1
- Elemento de lista de clase nombre1 con fragmento de clase nombre 1