Selectores CSS: Etiquetas, Clases e IDs Explicados Paso a Paso

HTML: La base que CSS necesita para trabajar

Antes de aplicar estilos, CSS necesita que el HTML defina qué elementos existen en la página. Los selectores CSS se apoyan completamente en esta estructura para saber dónde actuar.

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

<!-- Encabezado principal que define el tema de la página -->
<h1>Galería de imágenes</h1>

<!-- Imagen insertada en el documento -->
<!-- CSS luego podrá seleccionarla por etiqueta, clase o id -->
<img src="foto.jpg" alt="Paisaje natural" />

<!-- Encabezado principal que define el tema de la página -->
<h1>Galería de imágenes</h1>

<!-- Imagen insertada en el documento -->
<!-- CSS luego podrá seleccionarla por etiqueta, clase o id -->
<img src="foto.jpg" alt="Paisaje natural" />

Estructura HTML básica con encabezado e imagen — HTML define qué elementos existen; CSS decide cómo se ven.

CSS: Qué es un selector y por qué es clave

Un selector CSS indica exactamente qué elementos HTML deben recibir estilos. Sin selectores, CSS no tendría forma de saber dónde aplicar una regla.

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

/* Selector por etiqueta: apunta a todas las imágenes <img> */
img {
  /* Dibuja un borde visible alrededor de cada imagen */
  border: 2px solid black;
}

/* Selector por etiqueta: apunta a todas las imágenes <img> */
img {
  /* Dibuja un borde visible alrededor de cada imagen */
  border: 2px solid black;
}

HTML: El atributo id como identificador único

El atributo id permite identificar un elemento de forma única dentro del documento HTML. No puede repetirse y suele usarse para secciones específicas.

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

<!-- Sección única del sitio -->
<!-- El id "productos" no debe repetirse en el documento -->
<section id="productos">
  <h2>Productos destacados</h2>
</section>

<!-- Sección única del sitio -->
<!-- El id "productos" no debe repetirse en el documento -->
<section id="productos">
  <h2>Productos destacados</h2>
</section>

Elemento HTML con atributo id único — Cada id identifica un solo elemento.

CSS: Selector de ID y su alta especificidad

En CSS, los IDs se seleccionan usando el símbolo #. Estos selectores son muy específicos y deben usarse con moderación.

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

/* Selector de ID: apunta solo al elemento con id="productos" */
#productos {
  /* Espacio interno para separar el contenido */
  padding: 2rem;
}

/* Selector de ID: apunta solo al elemento con id="productos" */
#productos {
  /* Espacio interno para separar el contenido */
  padding: 2rem;
}

HTML: Uso de class para estilos reutilizables

Las clases permiten aplicar el mismo estilo a múltiples elementos. Son la herramienta principal para crear interfaces consistentes.

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

<!-- Ambas imágenes comparten la misma clase -->
<!-- Esto permite aplicar el mismo estilo desde CSS -->
<button class="mi-clase-reutilizable">BOTÓN</button>
<div class="mi-clase-reutilizable">Tarjeta</div>

<!-- Ambas imágenes comparten la misma clase -->
<!-- Esto permite aplicar el mismo estilo desde CSS -->
<button class="mi-clase-reutilizable">BOTÓN</button>
<div class="mi-clase-reutilizable">Tarjeta</div>

CSS: Selector de clase y diseño reutilizable

Los selectores de clase se escriben con un punto (.) y permiten construir sistemas de diseño escalables y mantenibles.

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

/* Selector de clase reutilizable */
.mi-clase-reutilizable {
   /* Define un color de fondo */
   background-color: #f2b705;
  /* Suaviza las esquinas del elemento */
  border-radius: 12px;
}

/* Selector de clase reutilizable */
.mi-clase-reutilizable {
   /* Define un color de fondo */
   background-color: #f2b705;
  /* Suaviza las esquinas del elemento */
  border-radius: 12px;
}

Selector de clase en CSS — Un selector de clase se define con un punto (.) seguido del nombre de la clase.

HTML: Aplicación de múltiples clases

Un mismo elemento puede tener varias clases separadas por espacios. Cada clase aporta una parte del estilo final.

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

<!-- El elemento combina dos clases -->
<!-- Cada clase agrega una característica visual -->
<button class="borde-redondeado img-chica">BOTÓN</button>
<div class="borde-redondeado img-chica">Tarjeta</div>
<img src="foto.jpg" class="borde-redondeado img-chica" alt="Imagen pequeña" />

<!-- El elemento combina dos clases -->
<!-- Cada clase agrega una característica visual -->
<button class="borde-redondeado img-chica">BOTÓN</button>
<div class="borde-redondeado img-chica">Tarjeta</div>
<img src="foto.jpg" class="borde-redondeado img-chica" alt="Imagen pequeña" />

CSS: Composición de estilos con múltiples clases

CSS aplica los estilos de todas las clases asignadas a un elemento, evitando duplicación de reglas y mejorando el mantenimiento.

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

/* Clase responsable de la forma */
.borde-redondeado {
  border-radius: 10px;
}

/* Clase responsable del tamaño */
.img-chica {
  width: 150px;
}

/* Clase responsable de la forma */
.borde-redondeado {
  border-radius: 10px;
}

/* Clase responsable del tamaño */
.img-chica {
  width: 150px;
}

HTML: Uso de etiquetas sin atributos

Los selectores de etiqueta no requieren modificar el HTML. CSS puede aplicar estilos directamente al nombre de la etiqueta.

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

<!-- Párrafos sin class ni id -->
<p>Primer párrafo</p>
<p>Segundo párrafo</p>

<!-- Párrafos sin class ni id -->
<p>Primer párrafo</p>
<p>Segundo párrafo</p>

htmlCssOnlineCourseResponsiveWebDesignFromScratch

Aprendé desde cero con clases 100% en vivo, grupos súper reducidos y acompañamiento real. Todo el contenido está diseñado y dictado por el creador de la plataforma, para que aprendas de verdad, ~~sin videos fríos~~ ni ~~cursos masivos~~.

Curso de HTML y CSS para Frontend

Dominá las bases de la programación frontend: estructura con HTML, estilos modernos con CSS y diseño rápido con Tailwind para lanzar tus primeros sitios responsivos y profesionales.10 clases en vivo con profesores expertos

Precio $150000 ARG Oferta especialDisponible por 0 Días y 00:00:00 Hs

Ver próximas fechas

CSS: Selector de etiqueta para estilos base

El selector de etiqueta aplica estilos a todos los elementos del mismo tipo. Es ideal para definir estilos globales iniciales.

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

/* Selector por etiqueta */
p {
  /* Color de texto aplicado a todos los párrafos */
  color: blue;
}

/* Selector por etiqueta */
p {
  /* Color de texto aplicado a todos los párrafos */
  color: blue;
}

Selector de etiqueta en CSS — Un selector de etiqueta se define con el nombre de la etiqueta.

Leccion Anterior

Ilustración del funcionamiento de CSS aplicando estilos visuales a HTML

Fundamentos de CSS

En esta lección aprendés cómo funciona CSS desde la base: qué es una regla de estilo, cómo se escribe la sintaxis correcta, qué son los selectores y cómo aplicar estilos visuales profesionales sobre cualquier estructura HTML.

Comenzar Lección

Leccion Actual

Selectores CSS

Los selectores son la base del CSS. En esta lección aprendés cómo decirle al navegador exactamente **qué elementos HTML deben recibir estilos**, entendiendo cuándo usar etiquetas, clases o IDs y cómo impactan en la especificidad y el mantenimiento del código.

Comenzar Lección

Lecciones Siguiente

Jerarquía, herencia y cascada de estilos en CSS

Jerarquía CSS: Herencia, Cascada y Especificidad

CSS no aplica estilos al azar. En esta lección aprendés cómo el navegador resuelve conflictos entre reglas usando herencia, cascada y especificidad. Dominá el orden real de prioridad para escribir CSS claro, escalable y sin sorpresas.

Comenzar Lección

¿Qué pasa si un elemento tiene un ID y una Clase con colores diferentes?

Gana el ID. CSS funciona con un sistema de puntos llamado 'Especificidad'. Un ID vale mucho más puntos que una clase, por lo que el navegador aplicará el estilo del ID, ignorando el de la clase en caso de conflicto.

¿Puedo ponerle dos IDs al mismo elemento?

No. El atributo `id` solo acepta un único valor. Escribir `<div id="header menu">` es inválido y el navegador no sabrá cómo interpretarlo correctamente.

¿Es obligatorio usar comillas en los atributos class e id?

Aunque en HTML5 a veces funciona sin comillas, es una muy mala práctica. Si olvidas las comillas y tu clase tiene un espacio, romperás el código. Usa siempre `class="mi-clase"`.

¿Puedo empezar el nombre de una clase con un número?

No. En CSS los selectores no pueden empezar con un dígito. `.2columnas` es inválido y el navegador lo ignorará. Debe ser `.columnas-2` o `._2columnas`.

¿Qué es mejor, usar guiones medios (-) o bajos (_) en los nombres?

El estándar de la industria CSS es el guión medio o 'kebab-case' (ej: `.mi-clase`). El guión bajo se usa más en metodologías específicas como BEM, pero el guión medio es el más común.

¿Puedo usar emojis en los nombres de clases?

Técnicamente CSS moderno soporta Unicode, así que podrías usar `.🔥 { color: red; }`. Sin embargo, es una práctica terrible para el mantenimiento y la compatibilidad, ¡no lo hagas en proyectos reales!

¿Cómo selecciono un elemento que está dentro de otro?

Usando el espacio. El selector `.padre .hijo` aplicará estilos a todos los elementos con clase 'hijo' que estén dentro de 'padre'. Se llama selector descendente.

¿Afecta al rendimiento usar muchas clases?

No de manera perceptible. Los motores de renderizado son muy eficientes. Es mucho mejor para el rendimiento usar clases reutilizables que repetir código CSS innecesariamente.

¿Qué significa `!important` y por qué debo evitarlo?

Es una instrucción que fuerza un estilo ignorando la especificidad. Se debe evitar porque rompe la cascada natural de CSS, haciendo que el código sea muy difícil de mantener y depurar en el futuro.

¿Es CSS Case Sensitive (sensible a mayúsculas)?

Depende. Las propiedades CSS (`color`, `margin`) no lo son. Pero los nombres de selectores (`.MiClase`) SÍ lo son en HTML. Por consistencia, se recomienda escribir todo en minúsculas.

¿Para qué sirve el selector universal `*`?

Selecciona todos los elementos del DOM. Se usa casi exclusivamente para el 'CSS Reset' (quitar márgenes por defecto) al inicio del proyecto.

¿Puedo agrupar clases e IDs en la misma regla?

Sí. Puedes escribir `#header, .destacado, p { ... }`. Todos los selectores separados por coma recibirán los estilos definidos en el bloque.

¿Qué pasa si escribo mal el nombre de la clase en el HTML?

Nada. CSS no da errores, simplemente no aplica el estilo. Si tu diseño no se ve como esperas, lo primero que debes revisar es que el nombre en el HTML y el CSS coincidan letra por letra.

¿Es mala práctica usar selectores de etiqueta como `div` o `span`?

Para estilos específicos, sí. Si das estilo a `div`, afectarás a todos los divs de la página. Es mejor usar clases (`.tarjeta`, `.contenedor`) para dar estilos estructurales.

¿Cómo funcionan los comentarios en CSS?

Se escriben entre `/*` y `*/`. Todo lo que esté dentro será ignorado por el navegador. Son útiles para organizar el código o dejar notas a otros desarrolladores.

¿Qué es la especificidad?

Es el sistema de puntuación que usa el navegador para decidir qué estilo gana cuando hay conflicto. Etiquetas valen 1, Clases valen 10, IDs valen 100.

¿Por qué no se debe usar ID para estilos CSS?

Porque su alta especificidad hace que sean difíciles de sobrescribir más adelante. Si quieres cambiar el estilo de un ID en una situación específica, te verás obligado a usar hacks o `!important`.

¿Puedo encadenar clases sin espacios?

Sí. El selector `.boton.rojo` (sin espacio) seleccionará solo los elementos que tengan AMBAS clases aplicadas al mismo tiempo. Es una técnica de filtrado más específica.

¿Qué son las pseudo-clases como `:hover`?

Son palabras clave que se añaden al selector para especificar un estado especial. Por ejemplo, `a:hover` aplica el estilo solo cuando el usuario pasa el mouse sobre el enlace.

¿Cómo inspecciono qué selectores están actuando en mi web?

Usando las Herramientas de Desarrollador (DevTools) de tu navegador (F12 o Clic derecho > Inspeccionar). Allí verás qué reglas CSS se aplican y cuáles están siendo sobrescritas.