3 Selectores (I)

3.1 Selectores básicos

Los selectores son la parte de la regla CSS que indica a qué elemento o elementos de la
página se deben aplicar los cambios de estilo. Como ves, se llama "selector" porque
"selecciona" una parte de la página.

En la página 1.1. ya se explicó cómo escribir las insrucciones o reglas CSS y qué parte de la
misma es el selector, por lo que la regla CSS se divide en selector y declaración. No
volveremos a insistir en ello, si tienes alguna duda, repasa el tema 1.1.Sintaxis CSS donde
se explica esto.

Aquí nos ocuparemos de los tipos de selectores, cual es la parte o partes de la página que
seleccionan, y las combinaciones que pueden tener entre ellos.

Selector universal

Se utiliza para seleccionar todos los elementos de la página. y se indica mediante un

asterisco(*). Ejemplo:

* { margin: 0; padding: 0; }

El selector universal selecciona toda la página entera, por lo que las propiedades que lleva
asociadas en la declaración se aplican a toda la página. En el ejemplo ponemos a cero todos
los márgenes (tanto interiores como exteriores) de todos los elementos d la página.

Suele utilizarse para dar un estilo inicial a la página, o estilo "reset" que luego puede ser
cambiado en otras etiquetas por la utilización de otros selectores. Dar un estilo inicial a la
página suele hacerse para uniformar el estilo en todos los navegadores, ya que no todos los
navegadores aplican los mismos estilos por defecto; es lo que se llama "resetear" la página.
Selector de etiqueta

Son los que hemos estado viendo en las páginas anteriores de este manual. Selecciona todas
las etiquetas que tengan el mismo nombre (por ejemplo todas las etiquetas <p> o todas las
etiquetas <h1>.)

Se indica escribiendo el mismo nombre de la etiqueta (o etiquetas) a las que selecciona.

Veamos unos ejemplos:

h1 { font-size: 2em; color: blue; }

h2 { font-size: 1.5em; color: olive; }

p { font-size: 1.1em; color: navy; }

En estos ejemplos se aplica diferente estilo al los diferentes trozos de texto dependiendo de
si estos son un título principal (con etiqueta <h1>), un titulo secundario (con etiqueta
<h2>), o un párrafo (con etiqueta <p>). Por lo tanto, de no indicar después otra cosa,
aplicaremos un mismo estilo para todos los títulos principales, otro estilo para los titulos
secundarios; y otro distinto para los párrafos.

Selector de clase

Si tenemos, por ejemplo, varios párrfos, yqueremos aplicar distintos estilos a cada uno de
ellos, debemos usar otro método que no sea el selector de etiqueta, ya que éste daría el
mismo estilo para todos.

La solución está en añadir un atributo de clase; class="nombre_de_clase" a la etiqueta

HTML, y luego, hacer referencia a esa clase mediante un selector de clase. Veamos un
ejemplo:

Código html:

<p class="textoazul">este texto está en azul</p>

Codigo css:

.textoazul { color: blue;}

En este ejemplo, en la etiqueta del código HTML, hemos añadido un nuevo atributo
(class="textoazul"), creando una nueva clase. Después en el código CSS ponemos una
regla cuyo selector haga referencia a esta clase (.textoazul { color: blue;}). De esta
manera a todas las etiquetas que lleven este atributo, se les aplicará su correspondiente
estilo.

Podemos dar a la clase el nombre que queramos, siempre que sigamos unas normas
mínimas, como no poner espacios en blanco, no empezar por un número, ni escribir
caracteres raros.

El selector CSS de clase es siempre el nombre que le hemos dado a la clase (valor de la
etiqueta class) precedido de un punto ( . ); el punto indica que éste es un selector de clase.

En el ejemplo anterior el texto lo veremos así:

este texto está en azul

Etiquetas div y span

Cuando queremos aplicar un estilo a una parte del texto que no coincide exactamente con
una etiqueta, bien por ser demasiado pequeño, o demasiado grande, podemos utilizar las
etiquetas <span>...</span> y <div> ... </div>. Estas son etiquetas que se incluyen en
el código html; pero que las estudiamos aquí porque están directamente vinculadas con el
lenguaje CSS.

Estas etiquetas; por sí mismas, no tienen ningún efecto sobre el texto o elemento que
encierran, salvo que la etiqueta <span> es un elemento en línea, y la etiqueta <div> es un
elemento de bloque. Sin embargo sirven para que mediante el atributo class o el atributo
id (que veremos a continuación), se puedan seleccionar partes del texto que no coinciden
con una etiqueta convencional.

La etiqueta <span>, al ser un elemento en linea, se emplea normalmente para seleccionar

trozos de texto pequeños, normalmente inferiores a un párrafo, pero a los que se les quiere
dar un estilo diferente. Ejemplo:

Código html:

<p>El <span class="verde"> verde </span> y el <span class="azul"> azul </span> son
colores destacados.</p>

Código css:

.verde { color: green; } .azul { color: blue; }

En el navegador veremos:

el verde y el azul son colores destacados.

La etiqueta <div>, al ser un elemento de bloque se utiliza para seleccionar bloques de texto
que contienen varias etiquetas. Veamos un ejemplo en la siguiente página html :

<html>
<head>
<title>Ejemplo etiqueta div</title>
<style type="text/css">
.seccion1 { color: navy; font-family: arial;margin: 5%; }
.seccion2 { color: purple; font-family: cursive; margin: 10% 30%;
}
</style>
</head>
<body>
<div class="seccion1">
<h1>Titulo sección 1</h1>
<h2>subtítulo sección 1</h2>
<p>primer párrafo de la sección 1</p>
<p>segundo párrafo de la sección 1</p>
</div>
<div class="seccion2">
<h1>Titulo sección 2</h1>
<h2>subtítulo sección 2</h2>
<p>primer párrafo de la sección 2</p>
<p>segundo párrafo de la sección 2</p>
</div>
</body>
</html>

En este ejemplo hemos resaltado el código CSS en verde, y las etiquetas div del código
HTML en azul. Como se puede ver, mediante las etiquetas div hemos dividido el texto de
la página en secciones. Mediante los atributos de clase hemos podido aplicar un estilo
diferente a cada una de esas secciones. En el navegador lo veremos así:

Ver página de ejemplo

La etiqueta div al ser una etiqueta de bloque también se emplea para formar las distintas
cajas que conforman la estructura de la página Web, pero esto se verá en temas posteriores.

Selector de ID

El selector de id funciona de manera parecida al selector de clase, su forma es la siguiente:

En la etiqueta HTML a la que queremos que afecte, incluiremos el atributo

id="nombre_de_id". Después en el código CSS haremos referencia a esta etiqueta
mediante el simbolo # (almohadilla) seguido del valor que le hemos dado al atributo
("nombre_de_id"). Ejemplo:
código html:

<p id="etiquetaid">Párrafo de etiqueta id</p>

código css:

#etiquetaid { text-align: center }

El atributo id es muy parecido al atributo class, en los dos podemos

poner cualquier nombre como valor, siempre que luego usemos este mismo
nombre como selector en el código CSS; sin embargo aquí, (para
seleccionar etiquetas con el atributo id) el valor irá precedido del
símbolo #. El símbolo # (almohadilla), por el que empiezan los selectores
de id, se escribe pulsando las teclas "Alt Gr" y "3" a la vez.

La diferencia con el selector class es que el selector id es único, es

decir, no puede haber más de una etiqueta con el atributo id en la misma
página con el mismo valor, en tal caso el estilo sólo se aplicaría a la
primera, ignorando las demás.

Por esto, su función más habitual es emplearlo con la etiqueta <div> para
delimitar los espacios de la página, tales como la cabecera, el cuerpo,
los menús de enlaces, los pies de página y otras secciones, las cuales
sólo aparecen una vez en cada página.