Los selectores en CSS son una de las características fundamentales que debemos dominar a la hora de aplicar estilos a los elementos de una página web. Sin ellos, no podríamos conectar nuestras reglas de estilo con los elementos del DOM (Document Object Model).

En este artículo, exploraremos en detalle qué son los selectores, por qué son importantes, cómo usarlos correctamente y algunas buenas prácticas. También incluiremos ejemplos prácticos para que puedas aplicarlos en tus proyectos.

¿Qué son los selectores en CSS?

Un selector en CSS es una estructura que se utiliza para apuntar a elementos específicos en un documento HTML y aplicarles estilos. En otras palabras, define qué elementos serán afectados por una regla CSS.

Veamos un ejemplo en el que trabajaremos sobre un elemento por el nombre de su etiqueta. En este caso un párrafo p, al que le asignaremos el color azul (blue):

p {
  color: blue;
}

El selector es p, que se refiere a todos los elementos <p> en el HTML.

¿Por qué son importantes los selectores en CSS?

A continuación veremos 4 razones por las que resulta fundamental saber utilizar los selectores a la hora de trabajar con estilos:

1. Control preciso de estilos. Permiten aplicar estilos específicos a elementos o grupos de elementos.
2. Reutilización. Facilitan el mantenimiento del código al reutilizar reglas en diferentes partes de la página.
3. Organización. Ayudan a estructurar y mantener el código limpio y entendible.
4. Interactividad. Junto con pseudoclases, permiten estilos dinámicos basados en el estado del elemento (hover, focus, etc.).

¿Para qué se utilizan?

Ahora veremos 3 usos fundamentales de los selectores:

1. Diseñar la apariencia de elementos específicos o generales. Cambiar colores, tamaños, márgenes, etc.
2. Estilizar elementos basados en su relación jerárquica. Por ejemplo, solo los <li> dentro de un <ul> específico.
3. Crear interacciones dinámicas. Resaltar un botón al pasar el cursor, cambiar el color de un enlace visitado, etc.

Tipos de selectores en CSS

A continuación, analizamos los principales tipos de selectores:

1. Selectores básicos

• Universal (*): permite aplica estilos a todos los elementos. Ejemplo: * { margin: 0; padding: 0; }
• De tipo: se emplea para seleccionar elementos por su nombre de etiqueta. Ejemplo: h1 { font-size: 2em; }
• Por clase (.): brinda la posibilidad de seleccionar elementos que tienen asignada una clase específica. Ejemplo: .destacado { color: red; }
• Por id (#): es la alternativa que posibilita seleccionar un elemento único por su ID. Ejemplo: #titulo { text-align: center; }

2. Selectores combinadores

• Descendiente: selecciona elementos dentro de otro. Ejemplo: div p { color: blue; }
• Hijo directo (>): se emplea para seleccionar solo los hijos directos. Ejemplo: ul > li { list-style: none; }
• Elemento adyacente (+): se usa para seleccionar el elemento inmediato siguiente. Ejemplo: h1 + p { font-weight: bold; }

3. Pseudoclases y Pseudoelementos

• Pseudoclases (:): seleccionan elementos según su estado. Ejemplo: a:hover { color: green; }
• Pseudoelementos (::): seleccionan partes de un elemento. Ejemplo: p::first-line { font-size: 2rem; }

Buenas prácticas en el uso de selectores en CSS

A continuación veremos 5 recomendaciones para utilizar los selectores en CSS:

1. Debemos evitar usar el selector universal. Emplear alternativas como el * en nuestras hojas de estilos, resulta costoso en rendimiento y suele afectar más elementos de los necesarios.
2. Usa clases en lugar de ids. Las clases son más reutilizables y no están limitadas a un único elemento.
3. Especificidad controlada. En nuestra estrategia es fundamental evaluar el equilibrio y ser precisos a la hora de elegir los tipos de selectores. En ese contexto, en ocasiones, los selectores demasiado específicos pueden redundar en mucho código. Combinaciones simples, que sean fáciles de sobrescribir si es necesario, pueden resultar más sencillas de mantener en un proyecto.
4. Nombres de clases descriptivos. Debemos utilizar nombres que indiquen el propósito del elemento, como .boton-primario.
5. En lo posible, evitar selectores inline: Es recomendable escribir las reglas en hojas de estilo externas para mantener el código organizado.

Ejemplos prácticos

En esta sección veremos un ejemplo práctico en el cual usamos diversos selectores y como se pueden combinar. Para esto crearemos un menú.

Arrancamos con el código HTML:

<nav>
  <ul class="menu">
    <li><a href="#">Inicio</a></li>
    <li><a href="#">Servicios</a></li>
    <li><a href="#">Contacto</a></li>
  </ul>
</nav>

Ahora podemos trabajar con el CSS:

.menu {
  list-style: none;
  padding: 0;
}

.menu li {
  display: inline;
  margin-right: 15px;
}

.menu a {
  text-decoration: none;
  color: black;
}

.menu a:hover {
  color: blue;
}

Ahora veamos una ejemplo donde vamos a crear una tarjeta estilizada.

En primer lugar creamos una caja donde ubicaremos la tarjeta, con un título y un párrafo.

<div class="card">
  <h2 class="card-title">Título</h2>
  <p class="card-description">Descripción de la tarjeta.</p>
</div>

Los estilos para esta tarjeta los trabajaremos de la siguiente forma:

.card {
  border: 1px solid #ddd;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.card-title {
  margin: 0;
  font-size: 1.5em;
  color: #333;
}

.card-description {
  color: #666;
}

En este ejemplo recurrimos a las clases como selectores. Dentro de las reglas de estilos aplicamos colores, tamaño de fuente, bordes, relleno, bordes redondeados, sombras y márgenes.

En conclusión

Los selectores en CSS son esenciales para definir cómo se verán los elementos en una web. Con un uso adecuado, podremos crear todo tipo de proyectos, bien organizados y fáciles de mantener. Siguiendo un orden y respetando las buenas prácticas, podremos tener siempre el el proyecto bajo control. Esto también será beneficioso si trabajamos en equipo.

Como en muchos otros campos del desarrollo web, la experiencia y la práctica nos brindarán más panorama sobre el armado de las hojas de estilos y el uso eficiente de los selectores. Para complementar esto, siempre recomiendo estar al tanto de las últimas novedades de CSS.

¿Te quedan dudas o necesitas más ejemplos? ¡Déjame un comentario y con gusto responderé!

Si te interesa aprender sobre CSS y desarrollo Web escribeme un mensaje.