Básico⏱ 25 min
🎨
CSS · Capítulo 2
Selectores CSS
Aprende a apuntar exactamente a los elementos que quieres estilizar con selectores de etiqueta, clase, id y universal.
📖
Teoría
Los selectores son la parte de CSS que determina a qué elementos HTML se aplica la regla. Existen varios tipos:
- Selector de etiqueta:
h1,p,div→ todos los elementos de ese tipo
- Selector de clase:
.nombre-clase→ elementos con esa clase
- Selector de id:
#mi-id→ el elemento único con ese id
- Selector universal:
*→ todos los elementos
La especificidad determina qué estilo gana cuando hay conflicto: id > clase > etiqueta.
css
/* Selector de etiqueta */
p { color: white; }
/* Selector de clase (punto) */
.destacado { background: #4F8EF7; }
/* Selector de id (hash) */
#titulo-principal { font-size: 3rem; }
/* Selector universal */
* { box-sizing: border-box; }
/* Combinando: elemento con clase */
p.nota { color: #F97316; }
/* Descendiente: p dentro de .contenedor */
.contenedor p { margin-left: 1rem; }
/* Múltiples selectores */
h1, h2, h3 { font-weight: bold; }💡Especificidad
Cuando dos reglas se aplican al mismo elemento, gana la más específica. Orden de especificidad (de mayor a menor):
style="" inline > #id > .clase > etiqueta. Si tienen la misma especificidad, gana la que aparece última en el CSS.⚡
Ejercicio práctico
🎯 Tu misión
Aplica estilos usando diferentes tipos de selectores: el selector universal para box-sizing, selectores de etiqueta para párrafos, clase para tarjetas, e id para el encabezado principal.
Vista previa