Selectores CSS - Universal, de tipo, clases, ID y avanzado

Cada instrucción contiene un selector que da formato a los tags de la página Web. Una indicación más sobre la sintaxis: formalmente, el área del selector finaliza en la llave de apertura de la declaración.

Sin embargo, ¡el bloque de la declaración pertenece al selector! Por lo tanto, si quiere definir una instrucción momentánea sin necesidad de escribir valores y propiedades, el selector deberá ser al menos.

h1 {}

Las propiedades y valores se pueden añadir más tarde. Pero si escribe el selector sin las llaves, estará introduciendo un error en la hoja de estilo.

Veamos ahora los diferentes tipos de selectores.

Selector Universal

El selector universal sirve para seleccionar, con ayuda de un joker (el carácter *) cada elemento del árbol del documento y vincularlo con una instrucciones determinada. Una instrucción muy típica es la siguiente:

* {
margin: 0;
padding: 0;
}

Con esta instrucción se da el valor cero, por ejemplo, a las distancias de todos los elementos (*) predefinidas por el navegador.

Selector de elemento o de tipo

En nuestros ejemplos hemos visto ahora los selectores del tipo más sencillo, referidos siempre a un determinado elemento HTML. La referencia se indica mediante la etiqueta, por ejemplo:

h1 {
color: #000033;
}

Para asignar a varios elementos las mismas propiedades, podemos formar un grupo con los selectores de elemento correspondientes:

h1, h2, h3 {
color: #000033;
}

En este caso hemos asignado el color azul a los tres tipos de título. Observe que los selectores han de ir separados mediante comas (,).

Selectores de clase

En el ejemplo anterior se ha asignado en bloque el color azul a todos los títulos. Supongamos ahora que nos encontramos en una situación en que algunos de los títulos <h2> no tienen que ir en azul sino en rojo y negrita –como excepción. Para situarse así, CSS nos ofrece el selector de clase.

En primer lugar, asigne en el código HTML del título un atributo de clase propio (class=”..”).

<h2 class=”rojo-negrita”>Título rojo negrita</h2>

Ahora escribamos en la hoja de estilo la instrucción especial que ha de aplicarse a esa clase. Para ello, sólo tiene que añadir el nombre de la clase al selector de elemento, separado mediante un punto (.), sin espacios en blanco.

h2.rojo-negrita {
color: #330000;
font-weight: bold;
}

A partir de ahora que necesite un título rojo y negrita, sólo tiene que asignarle la clase rojo-negrita.  Incluso se puede ir más lejos. Si en algún momento dado se necesita de un título <h3> (o cualquier otro elemento) en rojo y negrita – no vincule la clase a ningún otro elemento concreto.

.rojo-negrita {
color: #330000;
font-weight: bold;
}

Escribiendo la instrucción así, podrá asignar la clase rojo negrita a cualquier etiqueta HTML, por ejemplo:
<p class=”rojo-negrita”>Párrafo en rojo y negrita</p>

Selectores ID

Los selectores ID le permiten asignar nombres significativos a elementos HTML concretos. A diferencia de los selectores de clase, que sirven para un tipo de elementos (por ejemplo, todos los elementos del tipo <h1>) y que se pueden utilizar dentro de un documento todas las veces que se desee, los selectores ID se utilizan para un solo elemento (por ejemplo, un <h1>) y que se pueden utilizar dentro de un documento todas las veces que se desee, los selectores ID se utilizan para un solo elemento (por ejemplo <h1> concreto) y, por eso, sólo puede aparecer una vez en el documento HTML.

<h1 id=”verde-negrita”>Título verde en negrita</h1>

La instrucción en CSS correspondiente será entonces así:

h1#verde-negrita {
color: #003300;
}

La sintaxis se parece a la del selector de clase, pero el atributo HTML es ahora id=”…”, y en la instrucción de estilo se utiliza el carácter almohadilla (#) en lugar del punto (.) Aquí también se puede omitir la definición del elemento (en este caso <h1>) de modo que el selector puede aplicarse a cualquier elemento.

#verde-negrita {
color: #003300
}

Recuerde siempre que los IDs sólo se pueden utilizar una vez en cada documento, por lo que resultan especialmente apropiados para identificar contenedores de áreas de página, como por ejemplo cabeceras, navegaciones, contenidos, pies y similares.

Los IDs también se pueden utilizar para acceder al elemento con un script (por ejemplo JavaScript o PHP).

Selectores avanzados

En los grandes proyectos Web, con el tiempo se acaban acumulando una gran cantidad de formatos específicos para los diversos documentos. El resultado, a menudo, es un código fuente plagado de clases de todo tipo para cada página, por lo que al hacer modificaciones, o ajustes, es fácil pasar por alto algún detalle. Para situaciones así lo más práctico es utilizar los selectores contextuales en las anotaciones de estilo.

Selector descendiente (descendant selectors)

Supongamos que tiene una página con todas las instrucciones de estilo y que quiere añadir un cuadro de información especial con un color propio para algunos de los párrafos de texto. 

El color definido para la escritura en general ha sido el negro. Por eso, hemos creado una clase especial para este caso concreto: class=”rojo” y la hemos asignado a los correspondientes párrafos de texto:

<div id=”infoespecial”>
<p class=”rojo”>Texto habitual</p>
<p class=”rojo”>más texto</p>
<p class=”rojo”>más texto</p>
</div>

En sí, no sería correcto, pero inflamaríamos el código, tendríamos que escribir mucho más, y al final perderíamos la perspectiva de tanta clase: las modificaciones y ajustes serían cada vez más complicadas y susceptibles de error. En un caso así lo mejor es utilizar los selectores contextuales. En lugar de asignar una clase, asignamos el formato de <p> en el contexto de su elemento inmediatamente superior. Lo que en nuestro ejemplo sería:

#infoespecial p {
color: #ff0000;
}

Eso significa que dentro del elemento con el ID #infoespecial (y sólo ahí) todos los <p> tendrán el color rojo (#ff0000).

El código fuente permanece igual, sin ninguna clase especial:

<div id=”infoespecial”>
<p>Texto en general</p>
<p>más texto</p>
<p>más texto</p>
</div>

Los selectores descendientes se pueden incrustar en más niveles. Supongamos que ha definido el subrayado para los vínculos que aparecen en el contexto de un elemento cuyo ID es #contenido:

#contenido a {
text-decoration: underline;
}

Supongamos que también necesita que aparezcan en una lista <ul>; pero sin subrayar. Lo que ha de hacer es añadir en la hoja de estilo:

#contenido ul a {
text-decoration: none;
}

Cuando los selectors tienen varios niveles de anidamiento, lo mejor es leerlos de atrás hacia adelante:

No se subrayarán los vínculos que aparezcan en una lista <ul> -pero sólo si la lista está dentro de un elemento con el ID #contenido

El código HTML correspondiente sería así:

<div id=”contenido”>
<p><a href=”foo.html”>Texto del vínculo</a></p>
<ul>
<li>
<a href="foot.html">Texto del vínculo</a>
</li>
</ul>
</div>

El primer vínculo se subraya, el segundo no. Y tampoco aquí se necesita ninguna clase adicional.

Fijémonos brevemente en la relación de parentesco que aparece en el ejemplo que acabamos de ver:

#contenido ul a {…}

El elemento <a> es aquí hijo de <ul> y, por lo tanto, nieto de #contenido. Pero al nieto sólo se accede cuando su elemento padre es explícitamente un <ul>. Si quiere acceder al nieto en cualquier caso, independientemente del tipo de padre, deberá escribir la instrucción de la siguiente manera:

#contenido * a  {…}

De ese modo, se accede a todos los <a> que sean nietos de #contenido, pero no cuando los <a> son hijos de #contenido.

Naturalmente, también se pueden agrupar varios elementos juntamente con todos sus descendientes para asignarles las mismas instrucciones a todos. Al hacerlo, no obstante, deberá fijarse bien en escribir siempre el mismo selector:

#content h1, #content h2, #content h3 {
font-family: Georgia, serif;
font-size: italic;
}

Un error bastante frecuente es indicar el selector completo sólo en el primer elemento:

#content h1, h2, h3 {
font-family: Georgia, serif;
font-style: italic;
}

Eso significaría que <h2> y <h3> también recibirían ese formato cuando aparecen dentro del contenedor con el ID #content

Este tipo de escritura mantiene el código lo más reducido y claro posible. Además, permite clasificar muy bien los diferentes bloques dentro de la hoja de estilo y mantener así la visión de conjunto de los formatos aplicados a cada elemento.

Existen muchos otros selectores contextuales que, por desgracia, no han recibido gran soporte hasta ahora, especialmente por parte de IE.