Selectores CSS básicos

Formas básicas de seleccionar elementos (clases, ids, etc...)

Cuando comenzamos a trabajar con CSS, es habitual dar estilo con ejemplos muy sencillos, donde generalmente utilizamos un selector genérico que representa (por ejemplo) una etiqueta HTML como por ejemplo <div>. Sin embargo, lo que estamos haciendo en realidad es seleccionar todos los elementos del documento que sean dicha etiqueta.

Aunque el esquema general es mucho más amplio (lo iremos viendo poco a poco), para empezar, vamos a centrarnos en la sintaxis más básica de los selectores CSS: por etiqueta, por ID y por clases.

Sintaxis básica

Un resumen de los tipos de selectores CSS básicos que veremos serían los siguientes:

Selector Descripción
div Seleccionamos por etiqueta. Aplicamos estilos a todas las etiquetas que coincidan.
#page Seleccionamos por ID. Aplicamos estilos al elemento que tenga ese id. Debería ser un único elemento.
.primary Seleccionamos por clase. Aplicamos estilos a los elementos que tengan dicha class. Pueden existir varias.
button.primary Mixto. Seleccionamos por múltiples criterios. En este caso, por elemento y por clase.

Vamos a explicarlos uno por uno con sus peculiaridades.

Seleccionar por etiquetas

En este primer ejemplo, le vamos a decir al navegador que 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 llegar a ser mucho más complejo y potente, como veremos en los siguientes capítulos:

div {
background-color: red;
}

La verdadera potencia de CSS radica en la capacidad de poder seleccionar sólo los elementos que nos interesen, ya que a medida que el documento HTML crezca, aparecerán nuevos elementos que podrían adoptar ese estilo, y eso es algo que, probablemente, no nos va a interesar.

Otro ejemplo. Recuerda: Aplicamos los estilos CSS a TODOS los elementos de ese tipo:

strong {
color: red;
}

En el ejemplo anterior, todos los elementos marcados con la etiqueta HTML <strong> se visualizarán de color rojo. Este pequeño ejemplo es didáctico pero no suele ser práctico, ya que no nos permite diferenciar entre todos los elementos de ese tipo. Para ello tenemos los selectores que veremos a continuación.

Seleccionar por ID (únicos)

Todas las etiquetas 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 deben 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>. El primero de ellos, tiene ID saludo, una capa donde se le da la bienvenida al usuario. La segunda, con ID main, es 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 esos nombres.

En la práctica, los id no suelen utilizarse para dar estilo, ya que en la mayoría de los casos utilizar una clase es perfectamente válido y mucho más mantenible a la larga. La situación más recomendable para usar id es cuando queremos designar una zona del documento como una zona única que sabemos que no se va a repetir.

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

Como podemos ver en el ejemplo, en CSS la forma de hacer referencia a los IDs es con el símbolo #, mientras que en el HTML se indica el atributo id="saludo".

Seleccionar por clases

A medida que vamos codificando y creando nuestros documentos HTML, comprobaremos que necesitamos cosas más flexibles y cómodas que los IDs, ya que los elementos tienden a repetirse y no deben ser únicos. Aquí es donde entran en escena las clases de CSS.

Las etiquetas HTML pueden tener otro atributo interesante: class. La diferencia principal respecto a los IDs es que las clases no se requiere que sean ú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="classic">Opción 1</button>
<button class="classic">Opción 2</button>
<button class="classic">Opción 3</button>
<button class="back">Volver</button>
</div>
</body>
</html>

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

Para hacer esto con IDs (recordemos que son únicos, no deberían repetirse) tendríamos que crear 3 IDs con nombres diferentes, mientras que con las clases (las cuales si se pueden repetir) podemos reutilizar el mismo nombre. Esto nos permite indicar en la parte de CSS un sólo selector con los estilos y reutilizarlos en todos los elementos HTML que se desee.

.classic {
background-color: green;
color: white;
}

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

En CSS se hace referencia a las clases con un punto: .classic, mientras que en el HTML se escribiría el atributo class="classic":

button.classic {
background-color: green;
color: white;
}

p.classic {
color: red;
}

Además, en el caso de las clases, podemos incluso diferenciar el tipo de elemento del que se trata. Gracias a esto podríamos utilizar la clase .classic en <button> para dar estilo visual a botones, y la clase .classic en <p> para dar otros estilos diferentes a los párrafos de texto.

Selecciones mixtas

Al margen de todo lo que hemos visto, es posible utilizar varias clases en un mismo elemento HTML, simplemente separando por espacios dentro del atributo class.

De esta forma, a dicho elemento se le aplicarán los estilos de cada una de las clases indicadas, las cuales suelen tener un grupo de características relacionadas con su nombre, lo cuál puede ser muy interesante y práctico en algunos casos, dándonos mucha soltura a la hora de crear clases y reutilizarlas:

<button class="classic primary large">Botón</button>

Este enfoque se considera una de las bases del CSS atómico, donde se fundamentan las clases de utilidad (utility-classes) en las que se basan populares frameworks CSS como Tachyons o TailwindCSS.

Por último, mencionar que también tenemos la posibilidad de ser más específicos y aplicar estilo sólo a los elementos HTML que contengan todas las clases indicadas, colocando cada clase de forma consecutiva en el CSS, de la siguiente forma:

button.classic.primary.large {
/* Estilos CSS */
}

En este ejemplo, sólo se aplicarán los estilos cuando el elemento HTML <button> tenga una clase classic, una clase primary y una clase large. Si falta alguna de ellas, no se aplicará el estilo.

DigitalOcean
Tabla de contenidos