Resumen
Domina cómo aplicar estilos con precisión en CSS usando elementos, clases, ID, pseudoclases, especificidad y herencia. Aprende a evitar estilos repetidos, a inspeccionar el HTML en el navegador y a controlar cambios de estado como el hover con reglas claras y reutilizables.
¿Cómo seleccionar en CSS: elementos, clases e ID?
Trabajar con selectores es la base. Un selector de etiqueta aplica estilos a todas las etiquetas del mismo tipo. Las clases son reutilizables en múltiples elementos. Los ID son únicos y deben usarse para casos puntuales, especialmente cuando más adelante se interactúe con JavaScript.
- Usa el inspector del navegador: clic derecho y abrir inspector para ver HTML y estilos aplicados.
- Selector de etiqueta: afecta todas las etiquetas del mismo nombre.
- Selector de clase: se invoca con punto y puede repetirse en varios elementos.
- Selector de ID: se invoca con numeral y solo debe existir una vez.
- Evita estilos en línea como práctica habitual: tienen demasiado peso y complican el mantenimiento.
Ejemplos.
/* Selector de etiqueta: se replica en todos los elementos
*/ p { margin-bottom: 30px; } /* Clase reutilizable */ .rojo { color: red; } /* ID único */ #unico { background: yellow; }
¿Cómo ser más específico: selectores descendientes y contenedores?
Cuando no conviene crear más clases, los selectores descendientes permiten aplicar estilos solo a elementos dentro de un contenedor con clase. Esto evita “pisarse” entre estilos y mejora el control.
- Contenedor con clase: agrupa elementos relacionados.
- Selector descendiente: se escribe con un espacio entre el contenedor y el elemento objetivo.
- Solo afecta a los hijos dentro del contenedor indicado.
Ejemplos.
/* Estilo del contenedor */ .contenedor { border: 2px solid blue; } /* Solo
dentro de .contenedor */ .contenedor p { color: blue; }
¿Cómo usar pseudoclases y manejar especificidad y herencia?
Las pseudoclases cambian estilos según el estado de un elemento. Útiles para indicar interacción visual como el hover en enlaces y botones. Además, conocer la especificidad y la herencia evita conflictos al crecer el proyecto.
¿Qué hacen las pseudoclases hover, link y visits?
- hover: aplica estilos cuando el puntero pasa encima.
- link: aplica a enlaces no visitados.
- visits: aplica a enlaces ya visitados.
Ejemplos.
/* Estado de interacción en botón */
button:hover {
background: lightblue;
cursor: pointer;
}
/* Enlace no visitado */
a:link {
color: green;
}
/* Enlace visitado */
a:visited {
color: yellow;
}
¿Cómo funciona la especificidad en CSS?
Piensa la especificidad como un sistema de puntos que define qué regla gana.
- Elementos/etiquetas: 1 punto.
- Clases: 10 puntos.
- ID: 100 puntos.
- Estilos inline: 1000 puntos.
- importance: sobrescribe casi cualquier regla.
Claves prácticas.
- Los ID reescriben clases y etiquetas.
- Los estilos inline y importance deben usarse con cuidado.
- A mayor especificidad, más control, pero también más riesgo de conflictos.
¿Qué se hereda y qué no en CSS?
La herencia transmite estilos desde el contenedor padre a sus hijos cuando aplica a propiedades de texto.
- Se heredan: color, familia tipográfica, tamaño de fuente, alineación de texto y estilos de fuente.
- No se heredan: margin, padding, border, background, width, height, position.
Ejemplo de herencia.
/* El color se hereda a los hijos, como
dentro de .contenedor */ .contenedor { color: blue; }
¿Tienes dudas o un caso específico con selectores, pseudoclases o especificidad? Comenta y cuéntame qué estás intentando lograr.