Los selectores (i)

Cómo ya hemos visto, las reglas de CSS se componen de dos partes: un selector que identifica a qué elementos HTML queremos aplicar los estilos, una serie de propiedades que definen los estilos.

Hasta ahora hemos vistos selectores simples, que le aplican una serie de estilos a un ejemplo html, son los llamados selectores de etiqueta:

H1 { font-family: arial;
text-transform: capitalize;}

Pero hay selectores mucho más sofisticados que nos permiten hacer selecciones muy sofisticadas a la hora de elegir a qué cosas queremos aplicarle nuestros estilos.

Para los ejemplos vamos a utilizar propiedades que todavía no hemos visto, pero claro primero tenemos que aprender a seleccionar los elementos que queremos modificar y luego aprender a modificarlos.

Qué elementos podemos seleccionar con CSS

  • Todos los elementos de un tipo determinado: por ejemplo todos los encabezados de primer nivel (h1).
  • Todos los elementos de un tipo determinado que pertenezcan a la misma clase (luego veremos como asignar clases a los elementos)
  • Todos los elementos de determinado tipo que estén dentro de otros elementos que nosotros especifiquemos. (por ejemplo, todos los enlaces que formen parte de una lista).
  • Todos los elementos de cierto tipo que estén dentro de otro y que además pertenezcan a una clase. Por ejemplo, todos los enlaces que estén dentro de una lista y que además pertenezcan a las clase ”pepe”.
  • Todos los elementos de cierto tipo, pero sólo cuando aparezcan después de un determinado elemento. Por ejemplo todos los párrafos que aparezcan después de un elemento h2.
  • Cualquier elemento que pertenezca a determinada clase.
  • Un elemento específico al que tenga asignado un determinado ID

TIPOS DE SELECTORES

Vamos a organizar los selectores, no cómo lo hace la especificación de la WC3 (desde un punto de vista teórico), sino desde un punto de vista más práctico. Vamos a ver una tabla resumen, y luego pasaremos a explicarlos más detalladamente.

1.- Selectores básicos:

Selectores de etiqueta
Selectores de clases
Selectores de ID
Selectores de grupos

2.- Selectores Genealógicos:

Selectores de elementos descendientes
Selectores de hijos
Selectores de primogénitos *
Selectores de hermanos adyacentes

3.- Pseudo selectores:

Pseudo selectores de enlaces
Pseudo selectores de elementos*
Pseudo selectores de elementos dinámicos (*)
Pseudo selectores de idioma*

4.- Selectores de atributos. (*)

* por su complejidad o poco soporte por parte de los navegadores actuales, no entran dentro de este tutorial.

SELECTOR UNIVERSAL

Este selector resulta útil al trabajar con los selectores de atributos que veremos luego. Una regla de estilo aplicada así con un asterisco se aplicaría a todos y cada uno de los elementos de una página. Ejemplo

* { color: red}

SELECTORES DE ETIQUETA

Los selectores de etiqueta seleccionan cualquier elemento de una página que coincida con el selector. Por ejemplo, el selector p se aplicaría a todos los párrafos que aparecieran en una página. Para especificar un selector de etiqueta, simplemente utilizamos la etiqueta sin los <> Ejemplo:

body { color de fondo blanco, margen izquierdo de 1 cm, letra arial}

P { tipo de letra verdadna, tamaño 12 píxeles}

Utilización:

Utilizando selectores de etiqueta puedes cambiar la apariencia de cualquier elemento de una página ( o de todos).

Si has marcado bien la página utilizando html estructural (etiquetas lógicas y no físicas, strong en lugar de b), utilizando este tipo de marcado y con las hojas de estilo no tendrás que entrar al código html para modificar nada.

Si estás empezando con CSS este tipo de selector resulta sencillo y fácil para prácticar.

SELECTORES DE CLASE

Este tipo de selectores proporcionan un gran control, pero pueden dar lugar a una mala utilización de las hojas de estilo, como luego veremos; por eso hay que ser muy cuidadoso y muy estricto en su utilización.

Con los selectores de etiqueta hemos visto como podíamos aplicar una apariencia visual a todos los párrafos de una web, por ejemplo:

P { color negro; letra verdana}

¿Pero qué ocurre si quieres seleccionar un párrafo especídfico o un grupo de párrafos para que tengan una apariencia distinta? Podrías hacerlo, añadiendo etiquetas html del tipo <font face>, pero esto es precisamente lo que estamos tratando de evitar.

Aquí precisamente es dónde resultan útiles las clases. Podemos organizar “clases” de elementos del mismo tipo y aplicar una apariencia distinta a cada clase.

Pensemos por ejemplo en unas F.A.Q. (Respuestas a las preguntas más frecuentes), suelen estar estructuradas por una serie de preguntas y respuestas seguidas. Podríamos poner las preguntas en negrita y las respuestas en letra normal.

Utilizando las clases podemos asignar a los párrafos que sean una pregunta, la clase pregunta, y a los que sean una respuesta la clase respuesta. Y luego, en la hoja de estilos asignar una apariencia distinta a cada una.

Nuestra FAQ en html nos quedaría así.

<p class=”pregunta”> ¿De qué color es el caballo blanco de santiago</p>

<p class=”respuesta”> Blanco </p>

Sintaxis del CSS

Podemos asignar selectores de clase de dos maneras:

1) Aislado, por ejemplo

.pregunta {en negrita}
.respuesta {en letra normal}

En este caso podremos asociar la clase pregunta a cualquier elemento: párrafos, tablas, enlaces, etc, solo tendremos que añadir al código html la clase “pregunta”:

<a href=”lolailo.html” class=”pregunta”> (se vería en negrita)

2) Asociado a una etiqueta determinada,

p.pregunta {en negrita}
p.respuesta {en letra normal}

Este segundo tipo son los verdaderos selectores de clase, porque seleccionan una clase dentro de un determinado elemento. Seleccionan únicamente el elemento especificado en la regla de estilo. En nuestro caso, exclusivamente los párrafos de la clase pregunta sin afectar a otros elementos por mucho que llevasen asociada la clase “pregunta”, en este caso

<a href=”lolailo.html” class=”pregunta”>

se vería normalmente porque no hay ningún estilo asociado para los enlaces de la clase pregunta, sólo para los párrafos de la clase pregunta.

NOTA IMPORTANTE: Los selectores de clase, por su potencia, han inducido a muchos webmasters a una mala práctica que desgraciadamente está muy extendida. La utilización exclusiva de las clases para marcar visualmente el documento olvidando por completo la utilización de html estructural de forma que la cuestión queda así:

<span class=”titulo”>El título</span> <br /<br />

El amigo que iba por el <span class=”negrita”>campo</span>

De esta forma un navegador o dispositivo que no tenga soporte para CSS simplemente no sabría qué es lo más importante. Especialmente perniciosa es esta práctica en lo que a indexación en buscadores se refiere.

Los buscadores, al igual que no pueden leer imágenes tampoco pueden saber si una regla de CSS que pone “negrita” es importante o no. Si queréis que os indexen y que vuestras páginas sean más accesibles, acostumbraos a usar html estructural combinado con css.

<h1 class=”título”> el título></h1>

<p>El amigo que iba por el <strong>campo</strong></p>

Las hojas de estilo, van cambiando a lo largo de la historia de una web. Otro error bastante difundido es dar un nombre a la clase relativo a la apariencia visual, en lugar de a su función.

Por ejemplo, queremos que ciertas palabras enfatizadas (porque después van a aparecer en un glosario) aparezcan siempre en color verde, destacándose del texto. Así que creamos la regla de CSS

em.verde { color: green;}

Y cada palabra que vaya estar en nuestro diccionario la enfatizaríamos con la clase “verde”:

<em class=”verde”> palabra</em>

¿Qué ocurre si al cabo de un tiempo, queremos actualizar nuestra web con un nuevo conjunto de colores, y resulta que ahora las palabras que van a estar en el glosario están en rojo? Pues en esta situación tenemos dos soluciones:

a) Dejarlo como está y limitarse a cambiar la regla de estilo de { color: green;} a { color: red;}. Esta opción da poco trabajo pero puede causar verdaderos quebraderos de cabeza a los editores que elijan una clase verde y se encuentran con que el texto les aparece en rojo.

b) Cambiar em.verde { color: green;} por em.rojo { color: red;} y luego buscar por todo el documento o documentos que tenga el website y sustituir <em class=”verde”> palabra</em> por <em class=”rojo”> palabra</em>

Para evitar todos estos líos y trabajosas adaptaciones, es más práctico hacerlo bien desde el principio y nombrar las clases por su función en lugar de por su apariencia:

em.glosario { }    <em class=”glosario”>palabra</em>

Podrías cambiar de apariencia las palabras que fueran al glosario tantas veces como quisieras sin tener que volverte a preocupar del tema.

Veamos un ejemplo:

Si queremos que la clase sea sólo para un elemento específico, lo hacemos precediendo la clase con el elemento.

h2.orange {
color: orange;}

Esto nos permitiría tener unos h2 normales (ya que no les hemos aplicado la clase orange, y otros naranjas por que se la hemos aplicado. Pero, si aplicamos la clase orange a un elemento que no sea un h2, no se vería naranja, porque en la regla hemos dejado claro que sólo es para elementos h2. Veramos un ejemplo.

ejselector1.html

Además, debemos tener en cuenta que los efectos pueden sumarse, en nuestra hoja de ejemplo le hemos asignado un color rojo al elemento <em>, si ahora creamos una clase que diga que el elemento a la que se lo asignemos debe aparecer en negrita y se lo aplicamos a una etiqueta <em>, ésta, aparecerá en color rojo, porque según nuestrahoja de estilo todos los ems son rojos, pero además como pertenece a la clase negrita aparecerá en negrita. Ejemplo

ejselector2.html

Volver al índice

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s