Selectores CSS básicos

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. Sin embargo, lo que estamos haciendo en realidad es seleccionar todos los elementos del documento que sean dicha etiqueta.

Por ejemplo, consideremos el siguiente caso:

div {
  background-color: red;
}

En este ejemplo, 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 llegar a ser mucho más complejo y potente, como veremos en los siguientes capítulos.

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 crece, aparecerán nuevos elementos que podrían adoptar ese estilo, y ser eso algo que no nos interese.

Sintaxis básica

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

Seleccionar por etiquetas

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 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 no suelen utilizarse demasiado los IDs, 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 en la que los IDs están bien utilizados, es cuando se usan para designar una zona del documento que sabemos perfectamente que no se va a repetir, y debe ser identificada como una zona única.

#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".

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:

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

p.classic {
  color: red;
}

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 es interesantes y muy práctico de recordar, dándonos mucha soltura a la hora de crear clases y reutilizarlas:

<button class="classic green-border big">Botón</button>

Este enfoque se considera uno de los principios del denominado CSS atómico, en el que se basan 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.green-border.big {
  /* Estilos CSS */
}

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

Manz
Publicado por Manz

Docente, divulgador informático y freelance. Autor de Emezeta.com, es profesor en la Universidad de La Laguna y dirige el curso de Programación web FullStack y Diseño web FrontEnd de EOI en Tenerife (Canarias). En sus ratos libres, busca GIF de gatos en Internet.