Los selectores CSS son patrones utilizados para seleccionar elementos HTML a los que desea aplicar estilos. Son la columna vertebral de cualquier hoja de estilos CSS, permitiendo a los desarrolladores apuntar con precisión a uno o más elementos dentro de un documento para modificar su apariencia. Comprender los diferentes tipos de selectores es crucial para escribir CSS robusto y mantenible.
Selector de Tipo (Etiqueta)
Este selector se basa en el nombre de la etiqueta HTML. Aplica estilos a todas las instancias de esa etiqueta en el documento. Es el selector más básico y directo.
Ejemplo Práctico
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo Selector de Etiqueta</title>
<style>
/* Estilos para todos los párrafos del documento */
p {
color: darkblue;
font-family: 'Arial', sans-serif;
margin-bottom: 10px;
}
</style>
</head>
<body>
<p>Este es el primer párrafo con estilos definidos por su etiqueta.</p>
<p>Y este es otro párrafo, también afectado por el mismo selector de tipo.</p>
<div>Este div no tiene estilos aplicados por el selector 'p'.</div>
</body>
</html>
Selector de Clase
El selector de clase utiliza el atributo class de los elementos HTML. Permite aplicar estilos a múltiples elementos, independientemente de su tipo de etiqueta, con solo asignarles la misma clase. Se define con un punto (.) seguido del nombre de la clase.
Consideraciones:
- Un elemento puede tener varias clases, separadas por espacios (ej.
<div class="marco principal">). - Los nombres de clase deben empezar con una letra, un guion bajo (
_) o un guion (-).
Ejemplo Práctico
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo Selector de Clase</title>
<style>
/* Estilos para cualquier elemento con la clase 'destacado' */
.destacado {
background-color: #f0f8ff; /* Azul Alice */
border-left: 4px solid #4682b4; /* Azul acero */
padding: 8px 12px;
margin: 15px 0;
font-style: italic;
}
.centrado {
text-align: center;
}
</style>
</head>
<body>
<p class="destacado">Este párrafo tiene un estilo destacado gracias a su clase.</p>
<div class="destacado centrado">Este div también es destacado y centrado.</div>
<span>Este span no usa ninguna clase.</span>
</body>
</html>
Selector de ID
El selector de ID se utiliza para apuntar a un elemento HTML único. Se define con un signo de numeral (#) seguido del valor del atributo id. Es fundamental recordar que un id debe ser único en toda la página, lo que lo hace ideal para seleccionar elementos específicos para interacciones JavaScript o anclajes, más que para aplicar estilos de forma masiva.
Ejemplo Práctico
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo Selector de ID</title>
<style>
/* Estilos para el elemento con id 'seccion-contacto' */
#seccion-contacto {
background-color: #e0ffe0; /* Verde muy claro */
padding: 20px;
border-radius: 8px;
text-align: center;
font-weight: bold;
}
</style>
</head>
<body>
<header>
<h1>Mi Sitio Web</h1>
</header>
<main>
<p>Contenido principal aquí...</p>
</main>
<footer id="seccion-contacto">
<p>Contáctanos en info@ejemplo.com</p>
</footer>
</body>
</html>
Selector Universal
El selector universal (*) aplica estilos a absolutamente todos los elementos HTML en la página. Aunque potente, su uso debe ser cauteloso debido a que puede afectar el rendimiento y la especificidad del CSS. Comúnmente se utiliza para resetera márgenes y rellenos predeterminados del navegador.
Ejemplo Práctico
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo Selector Universal</title>
<style>
/* Elimina márgenes y rellenos predeterminados de todos los elementos */
* {
margin: 0;
padding: 0;
box-sizing: border-box; /* Incluye padding y border en el ancho/alto total */
font-family: 'Verdana', sans-serif;
}
body {
background-color: #f4f4f4;
color: #333;
}
h1 {
padding: 15px;
background-color: #6a5acd; /* Azul pizarra */
color: white;
text-align: center;
}
p {
padding: 10px 20px;
border-bottom: 1px solid #ccc;
}
</style>
</head>
<body>
<h1>Página con Reset Universal</h1>
<p>Este es un párrafo. Observa cómo no tiene márgenes predeterminados.</p>
<div>Este es un div. También afectado por el selector universal.</div>
</body>
</html>
Selector Descendiente
Este selector permite aplicar estilos a un elemento que es descendiente de otro, sin importar el nivel de anidamiento. Se define separando los selectores con un espacio.
Sintaxis: selector_padre selector_descendiente { estilos; }
Ejemplo Práctico
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo Selector Descendiente</title>
<style>
/* Estilos para todos los enlaces dentro de un elemento con la clase 'navegacion' */
.navegacion a {
color: #007bff; /* Azul brillante */
text-decoration: none;
margin: 0 10px;
font-weight: bold;
}
/* Los enlaces fuera de .navegacion no se ven afectados por la regla anterior */
body > a {
color: #dc3545; /* Rojo */
}
</style>
</head>
<body>
<nav class="navegacion">
<a href="#">Inicio</a>
<ul>
<li><a href="#">Productos</a></li>
<li><a href="#">Servicios</a></li>
</ul>
<a href="#">Contacto</a>
</nav>
<p>Un párrafo con <a href="#">un enlace externo</a>.</p>
</body>
</html>
Selector de Hijo Directo
A diferencia del selector descendiente, el selector de hijo directo (>) solo selecciona elementos que son hijos directos de otro elemento. No afectará a los elementos anidados más profundamente.
Sintaxis: selector_padre > selector_hijo { estilos; }
Ejemplo Práctico
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo Selector de Hijo Directo</title>
<style>
/* Solo los 'li' que son hijos directos de 'ul.lista-principal' */
ul.lista-principal > li {
list-style-type: square;
color: #28a745; /* Verde */
font-size: 1.1em;
margin-bottom: 5px;
}
/* Los 'li' anidados no serán afectados por el selector de hijo directo */
ul.lista-principal ul li {
color: #6c757d; /* Gris */
font-size: 0.9em;
list-style-type: circle;
}
</style>
</head>
<body>
<ul class="lista-principal">
<li>Elemento principal 1</li>
<li>Elemento principal 2
<ul>
<li>Sub-elemento 2.1</li>
<li>Sub-elemento 2.2</li>
</ul>
</li>
<li>Elemento principal 3</li>
</ul>
</body>
</html>
Selector de Agrupación
Permite aplicar los mismos estilos a múltiples selectores a la vez. Se define listando los selectores separados por comas (,).
Sintaxis: selector1, selector2, selector3 { estilos; }
Ejemplo Práctico
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo Selector de Agrupación</title>
<style>
/* Aplica los mismos estilos a h1, p con clase 'lead', y cualquier div con id 'info' */
h1,
p.lead,
#info {
color: #343a40; /* Gris oscuro */
font-family: 'Georgia', serif;
line-height: 1.5;
margin-bottom: 20px;
border-bottom: 1px dashed #ced4da;
padding-bottom: 10px;
}
p {
color: #6c757d; /* Gris */
}
</style>
</head>
<body>
<h1>Título Principal de la Página</h1>
<p class="lead">Este es un párrafo destacado que comparte estilos con el título.</p>
<p>Este es un párrafo normal, no afectado por el selector de agrupación.</p>
<div id="info">Información adicional importante que también recibe los estilos agrupados.</div>
</body>
</html>
Selector de Combinación (Intersección)
Este selector selecciona elementos que cumplen con múltiples condiciones de selección simultáneamente. Los selectores se escriben juntos, sin espacios. Si se incluye un selector de etiqueta, este debe ir primero.
Sintaxis: etiqueta.clase#id { estilos; }
Ejemplo Práctico
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo Selector de Combinación</title>
<style>
/* Estilos solo para botones que tienen la clase 'accion' y la clase 'primario' */
button.accion.primario {
background-color: #007bff; /* Azul brillante */
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 1em;
}
/* Estilos solo para botones que tienen solo la clase 'accion' */
button.accion {
background-color: #6c757d; /* Gris */
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 1em;
margin-left: 10px;
}
</style>
</head>
<body>
<button class="accion primario">Botón Principal</button>
<button class="accion">Botón Secundario</button>
<a class="accion primario" href="#">Enlace Primario (No es un botón)</a>
</body>
</html>
Pseudoclase :hover
La pseudoclase :hover permite aplicar estilos a un elemento cuando el cursor del ratón se encuentra sobre él. Es comúnmente utilizada para crear efectos interactivos y mejorar la experiencia de usuario.
Sintaxis: selector:hover { estilos; }
Ejemplo Práctico
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo Pseudoclase :hover</title>
<style>
.enlace-interactivo {
display: inline-block; /* Para que el padding y margin funcionen bien */
background-color: #ffc107; /* Amarillo */
color: #343a40; /* Gris oscuro */
padding: 10px 15px;
margin: 20px;
border-radius: 5px;
text-decoration: none;
transition: background-color 0.3s ease, color 0.3s ease; /* Transición suave */
}
/* Cambia el fondo y el color del texto al pasar el ratón */
.enlace-interactivo:hover {
background-color: #0056b3; /* Azul más oscuro */
color: white;
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
</style>
</head>
<body>
<a href="#" class="enlace-interactivo">Pasa el ratón por aquí</a>
<p>Este es un texto normal sin interacción.</p>
</body>
</html>
Pseudoclases Estructurales
Estas pseudoclases permiten seleccionar elementos basándose en su posición dentro del árbol del documento, en relación con sus hermanos. Esto reduce la dependencia de clases o IDs adicionales en el HTML, manteniendo el código más limpio y semántico.
El valor de n en :nth-child(n) y :nth-last-child(n) puede ser un número entero (comenzando desde 1 para el primer elemento), una palabra clave (even para pares, odd para impares), o una expresión algebraica (como An + B), donde A es el tamaño del paso y B es el desplazamiento del índice. El valor de n comienza implícitamente en 0 para las expresiones algebraicas (ej. si n=0 en 2n+1, selecciona el primer elemento).
Fórmulas Comunes para n
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo Pseudoclases Estructurales</title>
<style>
.lista-items li {
padding: 5px;
border-bottom: 1px dashed #eee;
}
/* El primer elemento 'li' de la lista */
.lista-items li:first-child {
background-color: #d4edda; /* Verde claro */
font-weight: bold;
}
/* El último elemento 'li' de la lista */
.lista-items li:last-child {
background-color: #f8d7da; /* Rojo claro */
font-style: italic;
border-bottom: none;
}
</style>
</head>
<body>
<ul class="lista-items">
<li>Ítem de la lista número 1</li>
<li>Ítem de la lista número 2</li>
<li>Ítem de la lista número 3</li>
<li>Ítem de la lista número 4</li>
</ul>
</body>
</html>
Aplicación Práctica de nth-child en Diseños de Cuadrícula
Un escenario común es aplicar estilos alternos o específicos en diseños de cuadrícula. Por ejemplo, en un diseño flexible de tres columnas, podemos usar :nth-child(3n) para seleccionar cada tercer elemento (el final de cada fila) o simplemente aplicar estilos de forma secuencial.
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo nth-child en Cuadrícula</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
background-color: #f0f2f5;
}
.contenedor-galeria {
width: 90%;
max-width: 1000px;
margin: 30px auto;
display: flex;
flex-wrap: wrap;
gap: 20px; /* Espacio entre los elementos de la cuadrícula */
}
.elemento-galeria {
flex: 1 1 calc(33.333% - 40px/3); /* Para 3 columnas con un gap de 20px */
min-width: 250px; /* Ancho mínimo para cada elemento */
background-color: white;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
padding: 15px;
text-align: center;
box-sizing: border-box;
}
/* Estilos usando nth-child para demostrar su funcionalidad */
.elemento-galeria:nth-child(odd) {
background-color: #e6f7ff; /* Azul claro para elementos impares */
}
.elemento-galeria:nth-child(even) {
border: 1px solid #cce7ff; /* Borde azul para elementos pares */
}
.elemento-galeria:nth-child(3n) {
font-weight: bold; /* Cada tercer elemento en negrita */
color: #0056b3;
transform: translateY(-5px); /* Un pequeño desplazamiento para destacarlo */
transition: transform 0.2s ease-out;
}
</style>
</head>
<body>
<div class="contenedor-galeria">
<div class="elemento-galeria">Artículo de Galería 1</div>
<div class="elemento-galeria">Artículo de Galería 2</div>
<div class="elemento-galeria">Artículo de Galería 3</div>
<div class="elemento-galeria">Artículo de Galería 4</div>
<div class="elemento-galeria">Artículo de Galería 5</div>
<div class="elemento-galeria">Artículo de Galería 6</div>
<div class="elemento-galeria">Artículo de Galería 7</div>
<div class="elemento-galeria">Artículo de Galería 8</div>
<div class="elemento-galeria">Artículo de Galería 9</div>
</div>
</body>
</html>