Cargando...

Selectores CSS

Una regla CSS tiene dos tareas: decidir a quién estilizar y cómo hacerlo. El «cómo» ya lo has practicado con propiedades, valores y unidades. Esta sesión se centra en el «a quién»: el selector que va al principio de la regla.

¿Qué son los selectores CSS?

Un selector es un patrón que le dice al navegador a qué elementos HTML debe aplicar el bloque de declaraciones. Si el selector coincide con un elemento de la página, ese elemento recibe todos los estilos que hay dentro de { }.

Tipos básicos de selector de un vistazo

Empieza con estos cuatro. En sesiones posteriores verás combinadores, atributos y pseudoclases; antes, domina el selector de elemento, class, id y *.

📊 Selectores CSS básicos

Selector A qué elementos afecta Ejemplo
Elemento (tipo) Todos los elementos con ese nombre de etiqueta p { … }
class Los elementos que tienen ese atributo class .card { … }
id El único elemento con ese id #hero { … }
Universal Todos los elementos (úsalo con moderación) * { … }

Selectores de elemento (tipo)

Un selector de elemento es simplemente el nombre de la etiqueta, sin punto ni almohadilla. h1 estiliza cada <h1> de la página y p, cada párrafo. Es la herramienta más general del día a día cuando quieres una base uniforme para una etiqueta.

Selectores de elemento para títulos y párrafos

css
CSS Code 
h1 {
color: #0f766e;
font-size: 2rem;
}

p {
color: #334155;
line-height: 1.6;
}

Cuándo resultan útiles los selectores de tipo

Úsalos para valores por defecto de todo el sitio: el color del texto en body, el grosor de los títulos, el espaciado de las listas. Si solo algunos párrafos deben verse distintos, mejor usa una class en lugar de cambiar todos los p.

Selectores de class

Un selector de class empieza con un punto (.) seguido del nombre de la class. En HTML marcas los elementos con class="card". Una misma class puede aparecer en muchos elementos, y por eso las classes son la herramienta principal del diseño reutilizable.

Selector de class para tarjetas reutilizables

css
CSS Code 
.card {
background: #f8fafc;
border: 1px solid #cbd5e1;
padding: 1rem;
border-radius: 8px;
}

El HTML debe coincidir con el nombre de la class

El CSS .card solo estiliza los elementos que realmente tienen class="card" (o varias classes entre las que esté card). La ortografía debe coincidir exactamente: .Card y .card son selectores distintos.

Selectores de id

Un selector de id empieza con una almohadilla (#) seguida del nombre del id. En HTML escribes id="hero". Un id debe ser único en la página: un solo elemento. Para casi todos los estilos es mejor usar classes; reserva el id para un punto de referencia realmente único.

Selector de id para un banner único

css
CSS Code 
#hero {
min-height: 40vh;
background: #0f172a;
color: #f8fafc;
padding: 2rem;
}

El selector universal (*)

El selector universal * coincide con todos los elementos. A veces se usa para un reinicio sencillo (por ejemplo, definir box-sizing), pero aplicar colores o márgenes a todo puede arruinar tu maquetación. Para el aspecto cotidiano de la página, elige selectores más precisos.

Selector universal usado con cuidado

css
CSS Code 
* {
box-sizing: border-box;
}

Combinar selectores en una página

Las hojas de estilo reales mezclan los tipos: valores base con selectores de elemento, piezas reutilizables con classes y objetivos únicos y poco frecuentes con ids. Esta hoja pequeña muestra el hábito: no todas las reglas necesitan un id.

Pequeña mezcla de tipos de selector en una página

css
CSS Code 
body {
font-family: Georgia, serif;
margin: 0;
}

.card {
max-width: 28rem;
margin: 1rem;
}

#hero {
padding: 2rem;
}

class o id: un hábito práctico

  • Prefiere classes para botones, tarjetas, enlaces de navegación y cualquier cosa que puedas reutilizar
  • Usa un id solo cuando el objetivo sea realmente único (un banner de la página, el cuadro de búsqueda principal)
  • No inventes un id nuevo para cada caja con estilo: impide la reutilización y te dará problemas en las lecciones sobre la cascada

Pruébalo tú mismo

  1. Añade a una página de práctica un <h1>, dos <p>, un <div class="card"> y una <section id="hero">.
  2. Escribe una regla de elemento para h1 y p.
  3. Da estilo a .card con relleno (padding), fondo claro y borde.
  4. Da estilo a #hero con fondo oscuro y texto claro.
  5. Opcional: añade * { box-sizing: border-box; } y comprueba que el relleno dentro de la tarjeta se comporta de forma más predecible.

Errores comunes

  • Escribir card { } cuando querías .card { }: sin el punto, el navegador busca un elemento llamado card, que no existe en HTML
  • Escribir hero { } en lugar de #hero { }: falta la almohadilla
  • Poner class="card" en el HTML pero escribir .crd en el CSS: no hay coincidencia, así que no hay estilos
  • Dar el mismo id a muchos elementos: HTML inválido y selección impredecible
  • Usar solo selectores de tipo para un diseño puntual: cambian todos los p o div cuando solo querías un bloque

Resumen

  • Los selectores eligen qué elementos HTML reciben los estilos de la regla
  • Los selectores de elemento usan el nombre de la etiqueta (h1, p)
  • Los selectores de class empiezan con un punto (.card) y coinciden con el atributo class del HTML
  • Los selectores de id empiezan con una almohadilla (#hero) y deben apuntar a un único elemento
  • * coincide con todo: útil para reinicios cuidadosos, no para decorarlo todo
  • Prefiere classes para interfaces reutilizables y usa los ids pocas veces y solo para elementos únicos

🧠 Pon a Prueba tu Conocimiento

Listo para Empezar

Pon a Prueba tu Conocimiento

Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema

❓
8
Preguntas
🎯
70%
Para Aprobar
♾️
∞
Tiempo
🔄
∞
Intentos

📝 Instrucciones

  • Lee cada pregunta cuidadosamente
  • Selecciona la mejor respuesta para cada pregunta
  • Puedes repetir el quiz tantas veces como quieras
  • Tu progreso se mostrará en la parte superior
Tema 1 de 1
Css Tutorial