¡Qué onda, dev! Bienvenida y bienvenido a 8devmx, tu rincón para aprender desarrollo web sin rodeos ni explicaciones aburridas. Si estás dando tus primeros pasos en el mundo del código frontend, seguro ya sabes que HTML se encarga de dar estructura a una página web. Pero, ¿cómo le damos color, forma y personalidad? ¡Ahí es donde entra CSS!

Para aplicar colores, márgenes o fuentes a un elemento HTML específico, necesitas una herramienta clave: los selectores CSS. Piensa en los selectores como el apuntador láser que le dice al navegador exactamente a qué parte del documento le vas a aplicar estilo. En esta guía te explicaremos desde cero qué son, cómo se clasifican y cómo usarlos como todo un profesional.

¿Qué es exactamente un selector CSS?

En CSS, un selector es la primera parte de una regla de estilo. Define a qué elemento o conjunto de elementos HTML se le aplicarán las declaraciones decorativas.

La estructura básica de una regla CSS es la siguiente:

selector {
  propiedad: valor;
}

Por ejemplo, si quieres que todos los párrafos de tu página tengan texto de color azul, usas el selector de etiqueta p:

p {
  color: blue;
}

Parece sencillo, ¿verdad? Pero la magia de CSS está en que existen distintos tipos de selectores para lograr desde cambios sencillos hasta diseños complejos.

Tipos de selectores en CSS (Paso a paso)

Podemos clasificar los selectores principales en cinco grandes grupos:

1. Selectores Simples

Son los más básicos y los primeros que vas a aprender. Seleccionan elementos según su nombre de etiqueta, su clase o su identificador único (ID).

  • Selector Universal (*): Afecta a absolutamente todos los elementos de la página. Se usa mucho para reiniciar márgenes. 
    * {
  box-sizing: border-box;
  margin: 0;
}
  • Selector de Etiqueta (Tipo): Apunta a todas las etiquetas HTML del mismo tipo. 
    h1 {
  font-family: Arial, sans-serif;
}
  • Selector de Clase (.nombre-clase): Es el rey del desarrollo web. Selecciona cualquier elemento que tenga esa clase en su atributo HTML. Se indica con un punto al inicio. 
    .btn-principal {
  background-color: #007bff;
  color: white;
}
  • Selector de ID (#nombre-id): Apunta a un único elemento único en la página usando el signo de gato o numeral (#). 
    #header-principal {
  padding: 20px;
}

2. Selectores de Combinadores

Sirven para seleccionar elementos basándose en la relación jerárquica que tienen dentro del DOM HTML (padres, hijos, hermanos).

  • Descendiente (espacio): Selecciona elementos que estén dentro de otro, sin importar qué tan profundo estén. 
    div p {
  color: gray; /* Todos los párrafos dentro de cualquier div */
}
  • Hijo directo (>): Selecciona solo a los hijos inmediatos de un padre. 
    article > p {
  font-size: 18px; /* Párrafos que son hijos directos de article */
}
  • Hermano adyacente (+): Selecciona el elemento que está inmediatamente después de otro al mismo nivel. 
    h2 + p {
  margin-top: 0; /* El primer párrafo justo después de un h2 */
}
  • Hermano general (~): Selecciona todos los hermanos que siguen a un elemento. 
    h2 ~ p {
  line-height: 1.6; /* Todos los párrafos hermanos después del h2 */
}

3. Selectores de Pseudoclases

Las pseudoclases seleccionan elementos según su estado actual o interacción con el usuario.

  • :hover: Cuando el usuario pasa el puntero del ratón por encima del elemento.
  • :focus: Cuando un campo de texto o botón recibe el foco del teclado.
  • :nth-child(n): Selecciona un elemento en base a su posición numérica dentro de su contenedor.
a:hover {
  text-decoration: underline;
}

li:nth-child(even) {
  background-color: #f2f2f2; /* Pinta las filas pares de una lista */
}

4. Selectores de Pseudoelementos

Te permiten aplicar estilo a partes específicas de un elemento o insertar contenido antes/después sin alterar el HTML.

  • ::before / ::after: Inserta contenido cosmético.
  • ::first-letter: Modifica únicamente la primera letra de un texto.
p::first-letter {
  font-size: 200%;
  font-weight: bold;
}

5. Selectores de Atributo

Selecciona elementos que tienen un atributo HTML específico o cuyo valor coincide con una regla.

/* Selecciona inputs de tipo texto */
input[type="text"] {
  border: 1px solid #ccc;
}

/* Selecciona enlaces cuya URL comience con https */
a[href^="https"] {
  color: green;
}

Ejemplo de código funcional: Tarjeta de perfil

Vamos a armar un ejemplo práctico integrando varios de estos selectores. Copia este código HTML y CSS en un archivo local para probarlo en tu navegador:

HTML (index.html):

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Tarjeta 8devmx</title>
  <link rel="stylesheet" href="estilos.css">
</head>
<body>
  <div class="card">
    <span class="badge">Nuevo</span>
    <h2 class="card-title">Desarrollador Junior</h2>
    <p class="card-text">¡Hola! Estoy aprendiendo CSS en 8devmx para construir proyectos increíbles.</p>
    <a href="#" class="btn">Ver perfil</a>
  </div>
</body>
</html>

CSS (estilos.css):

/* Selector universal */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Selector de etiqueta */
body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: #121212;
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

/* Selector de clase */
.card {
  background-color: #1e1e1e;
  padding: 24px;
  border-radius: 12px;
  max-width: 320px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
  position: relative;
}

/* Selector descendiente */
.card .card-title {
  font-size: 1.4rem;
  margin-bottom: 10px;
  color: #00d26a;
}

.card > p {
  font-size: 0.95rem;
  color: #cccccc;
  margin-bottom: 16px;
}

/* Pseudoclase y selector de clase */
.btn {
  display: inline-block;
  background-color: #00d26a;
  color: #000000;
  text-decoration: none;
  padding: 10px 16px;
  border-radius: 6px;
  font-weight: bold;
  transition: background-color 0.3s ease;
}

.btn:hover {
  background-color: #00b058;
}

/* Selector de atributo */
span[class="badge"] {
  background-color: #ff4757;
  font-size: 0.75rem;
  padding: 4px 8px;
  border-radius: 4px;
  position: absolute;
  top: 12px;
  right: 12px;
}

Errores comunes que debes evitar

  1. Abusar de los ID (#): Usar IDs para aplicar estilos complica la vida más adelante porque tienen una especificidad alta. Si luego quieres sobrescribir ese estilo, vas a batallar mucho. Es mejor usar clases (.).
  2. Olvidar los prefijos: Apuntar a una clase olvidando el punto (.clase) o a un ID sin el numeral (#id) es un error clásico de sintaxis que evitará que tus estilos carguen.
  3. Abusar de !important: Esta declaración rompe la cascada natural de CSS. Si necesitas usarlo frecuentemente, significa que tu estructura de selectores necesita reorganizarse.

Buenas prácticas para escribir CSS limpio

  • Nombres de clases claros y semánticos: Usa nombres que describan qué es el elemento, no cómo se ve (.btn-cancelar en vez de .boton-rojo-grande).
  • Mantén la especificidad baja: Procura no encadenar demasiados selectores (ej. body div.contenedor main article p span es un exceso difícil de mantener).
  • Organiza tu código: Agrupa tus estilos de forma lógica o por componentes.

Ejercicio práctico: ¡A tirar código!

Reto: Crea una lista desordenada (<ul>) con 5 elementos (<li>) en tu HTML. Usando solo CSS y selectores:

  1. Aplica un fondo gris claro a las filas impares usando :nth-child().
  2. Haz que cuando pases el ratón sobre cualquier fila, el texto cambie a color verde y se ponga en negrita (:hover).
  3. Agrega un icono o un guion automático antes de cada elemento usando ::before.

¡Anímate a realizarlo en tu editor de código favorito y pon a prueba lo aprendido!

Fuente original de referencia: Dev.to - Selectors in CSS