CSS es muy potente porque permite seleccionar elementos HTML de una forma muy práctica. Los IDs y las clases son el método más utilizado.

Hasta ahora sólo hemos visto la forma de dar estilo a todos los elementos HTML de un mismo tipo (todas las etiquetas div de la página, por ejemplo). Sin embargo, la potencia de CSS radica en la capacidad de seleccionar sólo lo que queremos, de múltiples formas posibles.

Previamente, había simplificado la sintaxis real de los selectores CSS, para mostrar la más básica posible:

div {
    background-color: red;
}

En ella, le decimos al navegador que a todas las etiquetas div que encuentre en la página, le ponga color de fondo rojo. La parte donde he colocado div es lo que se denomina selector, y puede ser mucho más complejo y potente.

Aunque el esquema general es mucho más amplio (lo iremos viendo todo, poco a poco), ahora, para empezar, vamos a centrarnos en la primera parte:

Sintaxis básica

Selectores

Como ya hemos mencionado, la forma más básica de seleccionar elementos en CSS es indicar el elemento al cuál queremos aplicarle los estilos. Esto se comportará como parece lógico: aplicando el estilo CSS a TODOS los elementos de ese tipo.

strong {
    color: red;
}

En el ejemplo anterior, todos los elementos marcados con negrita (etiqueta HTML strong) se visualizarán de color rojo. Sin embargo, nos puede interesar marcar de este color sólo una etiqueta strong concreta (o varias de ellas), pero no todas.

Selección de elementos por ID (únicos)

Todos los elementos HTML pueden tener un atributo id con un valor concreto. Este valor será el nombre que le daremos a la etiqueta. Un buen símil con la vida real es la de un DNI o tarjeta de identificación, ya que la particularidad clave de los ID es que no se pueden repetir, es decir, que sólo debe haber una etiqueta con el mismo ID por documento. Veamos un ejemplo:

<!DOCTYPE html>
<html>
<head>
    <title>Documento de ejemplo</title>
</head>
<body>
    <div id="saludo">
        <p>¡Hola, visitante! ¡Bienvenido a esta página!</p>
    </div>

    <div id="main">
        <p>En esta página encontrarás los siguientes temas:</p>
    </div>
</body>
</html>

En el documento anterior, encontramos dos elementos div. Uno de ellos, el primero, con ID saludo, es una capa donde se le da la bienvenida al usuario. La segunda, con ID main, una capa donde hay contenido. Sería incorrecto crear otra etiqueta con ID saludo o main en este mismo documento, ya que ya existe una con ese nombre.

En definitiva, los IDs se suelen utilizar para darle un nombre a una zona o elemento único del documento, como por ejemplo, la zona de contacto, el menú o la zona de comentarios.

En CSS se hace referencia a los IDs con el símbolo #. Si en el documento HTML anterior nos interesara destacar con colores sólo la primera capa, lo haríamos así:

#saludo {
    background-color:blue;
    color:white;
}

Selección de elementos por clases

Los IDs están muy bien para identificar zonas únicas del documento, pero a medida que vamos codificando y creando nuestra página, comprobaremos que necesitamos cosas más flexibles y cómodas. Aquí es donde entran en escena las clases.

Las etiquetas HTML pueden tener otro atributo interesante: class. La diferencia principal respecto a los ID es que las clases no necesitan ser únicas, sino que pueden repetirse a lo largo del documento HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Documento de ejemplo</title>
</head>
<body>
    <div id="main">
        <p>Escoge uno de los siguientes botones:</p>

        <button class="clasico">Opción 1</button>
        <button class="clasico">Opción 2</button>
        <button class="clasico">Opción 3</button>
        <button class="back">Volver</button>
    </div>
</body>
</html>

En el documento HTML anterior, tenemos cuatro botones. Los tres primeros son botones de opciones, por lo que establecemos la misma clase clasico, mientras que el último botón (un botón que hace que volvamos hacia atrás), le hemos indicado la clase back para que tengan un estilo diferente a los anteriores.

Para hacer esto que acabo de mencionar con IDs (recordemos que son únicos, no deberían repetirse) tendríamos que crear 3 IDs diferentes, mientras que con las clases (que si se pueden repetir), podemos reutilizar una misma clase para poner el mismo estilo a varios elementos, reutilizándolo y simplificando código:

En CSS se hace referencia a las clases con un punto. Veamos como les daríamos estilo CSS a los botones del documento HTML del ejemplo anterior:

.clasico {
    background-color:green;
    color:white;
}
.back {
    background-color:orange;
    color:white;
}

Además, en el caso de las clases, podemos incluso diferenciar el tipo de elemento del que se trata. Gracias a eso podríamos, por ejemplo, utilizar una clase clasico para dar estilo a botones, y una clase clasico para dar estilo a párrafos:

button.clasico {
    background-color:green;
    color:white;
}
p.clasico {
    color:red;
}

Truco: Se pueden utilizar varias clases en un mismo elemento HTML, simplemente separando por espacios dentro del atributo class. De esta forma, dicho elemento tendrá los estilos de cada una de las clases indicadas.

Esto puede darnos mucha soltura a la hora de crear clases y reutilizarlas con varios elementos:

<button class="clasico bordesverdes espaciado">Botón</button>

Por último, aunque no suele ser algo muy común, también tenemos la posibilidad de especificar sólo los elementos HTML que contengan varias clases, colocando cada clase de forma consecutiva en el CSS:

button.clasico.bordesverdes.espaciado {
    /* Estilos CSS */
}

De esta forma, los estilos CSS indicados sólo se aplicarán cuando el elemento HTML <button> tenga una clase clasico, una clase bordesverdes y una clase espaciado. Si falta alguna de ellas, no se aplicará.

Manz
Publicado por Manz

Docente, divulgador informático y freelance. Trabaja como autónomo, escribe en Emezeta.com (sitio web de tecnología con +10.000 visitas diarias) y es profesor en la Oficina de Software Libre de la Universidad de La Laguna, en Tenerife (Islas Canarias).