Introducción

Los selectores identifican a un elemento dentro de la página Web para luego poder definir sus propiedades. Los distintos tipos de selectores abarcan desde el simple nombre de las etiquetas usadas en HTML (BODY, P, CODE, TABLE, UL, etc.) hasta complejas combinaciones que permiten un juego muy amplio de selecciones dentro de la página.

El conocimiento en profundidad de los distintos selectores es uno de los aspectos más complejos del lenguaje de las Hojas de Estilo y también el que nos permite sacar el máximo provecho de las CSS.

Existen muchos editores de páginas Web que facilitan la labor de crear y aplicar Hojas de Estilo, pero los selectores que se pueden definir con estos programas son sólo los más elementales. La complejidad que pueden alcanzar los selectores contextuales escapan a las posibilidades de cualquier herramienta y es ahí donde los diseñadores deberán apelar a sus propios recursos.

Selectores de tipos

Son los que identifican a un tipo de elemento dentro de los que conforman el código HTML. Es decir, usan la misma palabra que la etiqueta (tag) sin los signos < y >. Por ejemplo, TABLE selecciona todos los elementos <TABLE> de la página. La siguiente regla identifica a los elementos <H1> de la página y los alínea centralmente:

H1 {text-align: center}

Quienes no conozcan a fondo todos las etiquetas del lenguaje HTML, pueden consultar el Listado de elementos de HTML 4.0, que contiene una pequeña definición sobre cada marca. Teóricamente al menos, todos los elementos de ese listado pueden utilizarse como selectores en las CSS.

Los selectores de tipo tienen la ventaja de que, con un simple cambio en la Hoja de Estilo, podemos modificar el aspecto de todos los elementos de ese tipo en todas las páginas de nuesto sitio. Esa es también su limitación: su utilidad se limita al caso en que todos los elementos de un tipo tengan la misma apariencia en cada una de nuestras páginas.

Selectores de clases

El selector de clases consta de un punto (.) seguido por el nombre de la clase que hayamos creado (el nombre lo elegimos nosotros). Supongamos que para publicar un reportaje queremos contar con un párrafo especial que denominaremos "pregunta":

P.pregunta {font-weight: bold; font-style: italic}

Ahora, a los párrafos que corresponden a las preguntas del entrevistador en el supuesto reportaje les agregamos el atributo CLASS dentro de la marca de la página HTML:

<P CLASS="pregunta">Esta es una pregunta del reportero</P>

Todos los párrafos de la clase "pregunta" aparecerán con texto en itálicas negritas para diferenciarlos de los párrafos normales. Observen que en el tag de la página HTML la sintaxis difiere de la CSS: luego de la palabra CLASS sigue un signo igual (=) y entre comillas ("") el nombre de la clase.

Si bien estos selectores requieren un agregado en el código HTML de las páginas, nos permiten una amplia libertad para crear diversas variantes de un mismo elemento. Más aún, podemos crear una clase genérica para aplicar a cualquier elemento de la página y no sólo a los párrafos. Basta con suprimir en el estamento el primer selector y dejar únicamente el punto (.) y el nombre de la clase:

.contraste {color: #FFFF00; background-color: #000000}

En este caso, la clase "contraste" equivale a cualquier elemento con el atributo CLASS="contraste". Por ejemplo:

<H1 CLASS="contraste">Un título con contraste</H1>

<P CLASS="contraste">Un párrafo con contraste</P>

<OL CLASS="contraste">Una lista con contraste</B>

Selectores de ID

Los selectores de ID funcionan de manera muy similar a los selectores de clases, salvo que, a diferencia de estos últimos, sólo pueden aplicarse a un elemento de la página. Quiere decir que si hay un elemento que tiene asignado el atributo ID="principal" no podrá haber otro ID con igual valor (es decir, con el mismo nombre). La sintaxis en la CSS también es similar, solamente que en vez de usar un punto se utiliza el carácter de numeral (#):

H1#titulo1 {text-align: center}

#volanta {font-style: italic}

En el primer caso, aquel elemento H1 con ID="titulo1" de la página será centrado. En el segundo, cualquier elemento que tenga asignado el atributo ID="volanta" irá en itálicas.

Los selectores de ID no tienen el grado de flexibilidad de los selectores de clases, por ejemplo, pero son una opción para aquellos casos en que se necesite identificar de modo exclusivo un determinado elemento de la página.

Selector de atributos

El último tipo de selectores avanzados lo forman los selectores de atributos, que permiten seleccionar elementos HTML en función de sus atributos y/o valores de esos atributos.

Los cuatro tipos de selectores de atributos son:

[nombre_atributo], selecciona los elementos que tienen establecido el atributo llamadonombre_atributo, independientemente de su valor.
[nombre_atributo=valor], selecciona los elementos que tienen establecido un atributo llamadonombre_atributo con un valor igual a valor.
[nombre_atributo~=valor], selecciona los elementos que tienen establecido un atributo llamadonombre_atributo y cuyo valor es una lista de palabras separadas por espacios en blanco en la que al menos una de ellas es exactamente igual a valor.
[nombre_atributo|=valor], selecciona los elementos que tienen establecido un atributo llamadonombre_atributo y cuyo valor es una serie de palabras separadas con guiones, pero que comienza con valor. Este tipo de selector sólo es útil para los atributos de tipo lang que indican el idioma del contenido del elemento.

A continuación se muestran algunos ejemplos de estos tipos de selectores:

/* Se muestran de color azul todos los enlaces que tengan

un atributo "class", independientemente de su valor */

a[class] { color: blue; }

/* Se muestran de color azul todos los enlaces que tengan

un atributo "class" con el valor "externo" */

a[class="externo"] { color: blue; }

/* Se muestran de color azul todos los enlaces que apunten

al sitio "http://www.ejemplo.com" */

a[href="http://www.ejemplo.com"] { color: blue; }

/* Se muestran de color azul todos los enlaces que tengan

un atributo "class" en el que al menos uno de sus valores

sea "externo" */

a[class~="externo"] { color: blue; }

/* Selecciona todos los elementos de la página cuyo atributo

"lang" sea igual a "en", es decir, todos los elementos en inglés */

*[lang=en] { ... }

/* Selecciona todos los elementos de la página cuyo atributo

"lang" empiece por "es", es decir, "es", "es-ES", "es-AR", etc. */

*[lang|="es"] { color : red }

Agrupamiento

Cuando tenemos varios selectores que comparten las mismas declaraciones pueden agruparse en una lista separada por comas (,). No se trata de un tipo de selector especial sino de una fórmula abreviada para aplicar las mismas propiedades a distintos selectores en un solo paso. Por ejemplo, si tenemos:

H1 {font-family: Arial, Sans-serif}

P {font-family: Arial, Sans-serif}

TABLE {font-family: Arial, Sans-serif}

#volanta {font-family: Arial, Sans-serif}

Podemos simplificarlo de este modo:

H1, P, TABLE, #volanta {font-family: Arial, Sans-serif}

Selector de hijos

Se utiliza para seleccionar un elemento que es hijo de otro elemento y se indica mediante el "signo de mayor que" (>).

Mientras que en el selector descendente sólo importa que un elemento esté dentro de otro, independientemente de lo profundo que se encuentre, en el selector de hijos el elemento debe ser hijo directo de otro elemento.

p > span { color: blue; }

<p>

<span>Texto1</span>

</p>

<p>

<span>Texto2</span>

</a>

</p>

En el ejemplo anterior, el selector p > span se interpreta como "cualquier elemento <span> que sea hijo directo de un elemento <p>", por lo que el primer elemento <span> cumple la condición del selector. Sin embargo, el segundo elemento <span> no la cumple porque es descendiente pero no es hijo directo de un elemento <p>.

Utilizando el mismo ejemplo anterior se pueden comparar las diferencias entre el selector descendente y el selector de hijos:

p a { color: red; }

p > a { color: red; }

<p>

<a href="#">Enlace1</a>

</p>

<p>

<span>

<a href="#">Enlace2</a>

</span>

</p>

El primer selector es de tipo descendente (p a) y por tanto se aplica a todos los elementos <a> que se encuentran dentro de elementos <p>. En este caso, los estilos de este selector se aplican a los dos enlaces.

El segundo selector es de hijos (p > a) por lo que obliga a que el elemento <a> sea hijo directo de un elemento <p>. Por tanto, los estilos del selector p > a no se aplican al segundo enlace del ejemplo anterior.

Selector adyacente

El selector adyacente se emplea para seleccionar elementos que son hermanos (su elemento padre es el mismo) y están seguidos en el código HTML. Este selector emplea en su sintaxis el símbolo +. Si se considera el siguiente ejemplo:

h1 + h2 { color: red }

<body>

<h1>Titulo1</h1>

<h2>Subtítulo</h2>

...

<h2>Otro subtítulo</h2>

...

</body>

Los estilos del selector h1 + h2 se aplican al primer elemento <h2> de la página, pero no al segundo <h2>, ya que:

El elemento padre de <h1> es <body>, el mismo padre que el de los dos elementos <h2>. Así, los dos elementos <h2> cumplen la primera condición del selector adyacente.

El primer elemento <h2> aparece en el código HTML justo después del elemento <h1>, por lo que este elemento <h2> también cumple la segunda condición del selector adyacente.

Por el contrario, el segundo elemento <h2> no aparece justo después del elemento <h1>, por lo que no cumple la segunda condición del selector adyacente y por tanto no se le aplican los estilos de h1 + h2.

El siguiente ejemplo puede ser útil para los textos que se muestran como libros:

p + p { text-indent: 1.5em; }

En muchos libros es habitual que la primera línea de todos los párrafos esté indentada, salvo la primera línea del primer párrafo. El selector p + p selecciona todos los párrafos que están dentro de un mismo elemento padre y que estén precedidos por otro párrafo. En otras palabras, el selector p + p selecciona todos los párrafos de un elemento salvo el primer párrafo.

El selector adyacente requiere que los dos elementos sean hermanos, por lo que su elemento padre debe ser el mismo. Si se considera el siguiente ejemplo:

p + p { color: red; }

<p>Lorem ipsum dolor sit amet...</p>

<div>

<p>Lorem ipsum dolor sit amet...</p>

</div>

En el ejemplo anterior, solamente el segundo párrafo se ve de color rojo, ya que:

El primer párrafo no va precedido de ningún otro párrafo, por lo que no cumple una de las condiciones de p + p

El segundo párrafo va precedido de otro párrafo y los dos comparten el mismo padre, por lo que se cumplen las dos condiciones del selector p + p y el párrafo muestra su texto de color rojo.

El tercer párrafo se encuentra dentro de un elemento <div>, por lo que no se cumple ninguna condición del selector p + p ya que ni va precedido de un párrafo ni comparte padre con ningún otro párrafo.

Bibliográfia

Electronicas

http://librosweb.es/libro/css_avanzado/capitulo_3.html

http://www.sidar.org/recur/desdi/mcss/manual/sel.php#s_ag

http://www.sidar.org/recur/desdi/traduc/es/css/selector.html