CSS: Selectores

En artículos anteriores hemos hablado de la tecnología CSS y de su capacidad para modificar el aspecto visual de los elementos de una página web, ahora debemos aprender a indicar sobre qué elementos queremos aplicar los estilos.

Un ejemplo base muy sencillo es el siguiente:

body {
color: #FF0000; background-color: grey;
}

Este ejemplo define para todo lo que haya dentro del body, un color de letra (rojo) y un fondo de color gris.

Pero…¿ cómo seleccionar elementos más concretos?

• Selección sencilla de elementos por tipo: Se indica el tipo de elemento y a continuación sus estilos entre corchetes, esto afectará a todos los elementos de ese tipo en la web.

/* Esto afectará a todos los enlaces (a) de la web*/
a {
color: #FA0223;
}

/* Es posible seleccionar varios tipos a la vez*/

a, p {
color: green;
}

• Selección por clases: Permite seleccionar por clase, lo cual da la posibilidad de aplicar diferentes estilos al mismo tipo de elemento.

/*Suponiendo en el HTML un elemento <div class="azul"> y un <div class="rojo> */

div.rojo{
color: #FF0000;
}
div.azul{
color: #0000FF;
}

/*Con esto, podemos definir un color diferente para dos elementos del mismo tipo*/

/*También es posible definir estilos por clase globales, que podemos usar en cualquier elemento de la web*/

.estiloGlobal{
text-align:center;
}

• Selección por identificadores: parecido al uso de selectores de clase, la peculiaridad de los identificadores es que solo pueden aplicarse a un elemento a la vez (según el estándar W3C de CSS·).

/*Suponiendo un <div id="rojo">*/

#rojo{
color: #FF0000;
}

• Agrupación de selectores: A menudo los estilos emplean código recurrente, por ejemplo, podemos desear la misma tipografía para párrafos que para enlaces, en ese caso podemos agrupar también selectores de clase y de identidad.

.mensaje, .titulo {
color: #00FF00;
}

/*También es posible mezclar diferentes selectores*/

.rojo, #amarillo, p {
background-color: pink;
}