CSS Fundamental

Selectores CSS: El Lenguaje de Vinculación

Antes de aprender sobre colores o márgenes, necesitas dominar cómo decirle al navegador 'a qué' aplicar esos estilos. Este módulo es la base de toda la arquitectura CSS, profundizando en la tríada esencial: Etiquetas, Clases e Identificadores.

Los selectores son el mecanismo fundamental que permite al CSS 'apuntar' y dar estilo a la estructura HTML.

Concepto: ¿Qué es un Selector?

Un selector es el patrón que utiliza el navegador para buscar elementos en tu página web. Es la primera parte de cualquier regla CSS. Sin un selector, el código CSS sería una lista de instrucciones sin destinatario. El selector responde a la pregunta: '¿A quién le pinto el fondo de rojo?'.

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

/* ESTRUCTURA ANATÓMICA */

selector {
  propiedad: valor;
}

/* Ejemplo Real */
h1 {
  color: navy;
}

/* ESTRUCTURA ANATÓMICA */

selector {
  propiedad: valor;
}

/* Ejemplo Real */
h1 {
  color: navy;
}

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

/* Todos los enlaces del sitio pierden el subrayado */
a {
  text-decoration: none;
}

/* Todos los párrafos tendrán este margen */
p {
  margin-bottom: 20px;
}

/* Todos los enlaces del sitio pierden el subrayado */
a {
  text-decoration: none;
}

/* Todos los párrafos tendrán este margen */
p {
  margin-bottom: 20px;
}

Diagrama de alcance global del selector de etiqueta — El selector de etiqueta actúa como una red amplia: atrapa a todos los elementos del tipo especificado sin excepción.

Selector de ID (Identificador)

El ID es un nombre único e irrepetible asignado a un solo elemento. Funciona como un número de documento. * **En HTML:** Atributo `id="nombre"`. * **En CSS:** Se usa el prefijo almohadilla `#`. Debido a su unicidad, se reserva para elementos estructurales singulares (como el `nav` principal o el `footer`).

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

<div id="contenedor-principal">
  ...
</div>

/* CSS */
#contenedor-principal {
  width: 960px;
  margin: 0 auto;
}

<div id="contenedor-principal">
  ...
</div>

/* CSS */
#contenedor-principal {
  width: 960px;
  margin: 0 auto;
}

Selector de Clase (Class Selector)

Las clases son grupos de estilos reutilizables. A diferencia del ID, una clase puede ser usada por infinitos elementos. * **En HTML:** Atributo `class="nombre"`. * **En CSS:** Se usa el prefijo punto `.`. Es la herramienta principal del desarrollador frontend para crear sistemas de diseño modulares (botones, tarjetas, alertas).

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

<button class="btn-alerta">Borrar</button>
<span class="btn-alerta">Error</span>

/* CSS */
.btn-alerta {
  background-color: crimson;
  color: white;
}

<button class="btn-alerta">Borrar</button>
<span class="btn-alerta">Error</span>

/* CSS */
.btn-alerta {
  background-color: crimson;
  color: white;
}

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

<div class="tarjeta destacado sombra">
  Producto Premium
</div>

/* El div recibirá los estilos de .tarjeta,
   MÁS los de .destacado, MÁS los de .sombra */

<div class="tarjeta destacado sombra">
  Producto Premium
</div>

/* El div recibirá los estilos de .tarjeta,
   MÁS los de .destacado, MÁS los de .sombra */

Esquema visual de suma de estilos con clases múltiples — La composición permite código CSS más pequeño y reutilizable, aplicando múltiples 'capas' de estilo a un objeto.

Comparativa Crítica: ID vs Class

Entender la diferencia es vital para la arquitectura del código: * **Reutilización:** ¿El estilo se usará más de una vez? Usa **Class**. * **Unicidad:** ¿Es el único elemento de su tipo en la página? Podrías usar **ID**. * **JavaScript:** Los IDs son ideales para 'ganchos' de JS, mientras que las Clases son ideales para estilos visuales.

Tabla comparativa de propiedades ID vs Class — Regla de oro: Ante la duda, usa siempre una Clase. Deja los IDs solo para casos muy específicos.

Sintaxis de Atributos HTML

Errores comunes al escribir HTML pueden hacer que el CSS falle. Recuerda: 1. Los valores van entre comillas (`class="nombre"`). 2. En el HTML **NO** se escriben los símbolos `.` o `#`. Esos son exclusivos del CSS. 3. No uses espacios dentro del nombre de una sola clase (los espacios separan clases distintas).

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

✅ CORRECTO:
<div id="header" class="menu oscuro"></div>

❌ INCORRECTO:
<div id="#header"> (Sobra el #)
<div class=".menu"> (Sobra el .)
<div class="menu-oscuro"> (Esto es UNA clase)
<div class="menu oscuro"> (Esto son DOS clases)

✅ CORRECTO:
<div id="header" class="menu oscuro"></div>

❌ INCORRECTO:
<div id="#header"> (Sobra el #)
<div class=".menu"> (Sobra el .)
<div class="menu-oscuro"> (Esto es UNA clase)
<div class="menu oscuro"> (Esto son DOS clases)

El Selector Universal (*)

El asterisco `*` selecciona absolutamente todos los elementos del DOM. Es muy potente pero costoso en rendimiento si se abusa de él. Su uso principal es el 'CSS Reset': eliminar los márgenes y paddings inconsistentes que traen los navegadores por defecto para empezar a diseñar sobre un lienzo limpio.

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

/* Reset Universal */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Reset Universal */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

/* Estilo compartido para títulos */
h1, h2, h3, .titulo-custom {
  font-family: 'Helvetica', sans-serif;
  color: #222;
  margin-bottom: 1rem;
}

/* Estilo compartido para títulos */
h1, h2, h3, .titulo-custom {
  font-family: 'Helvetica', sans-serif;
  color: #222;
  margin-bottom: 1rem;
}

Diagrama de flujo de estilos compartidos — La agrupación permite centralizar el mantenimiento. Si cambias el color aquí, cambia en todos los elementos listados.

Reglas de Naming (Nombres)

CSS tiene reglas estrictas para los nombres de clases e IDs: 1. Deben comenzar con una letra (nunca con un número). 2. No pueden contener espacios. 3. Son sensibles a mayúsculas y minúsculas (`.Boton` ≠ `.boton`). **Convención:** Usa siempre `kebab-case` (minúsculas separadas por guiones).

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

✅ VÁLIDO:
.boton-enviar
#seccion-1

❌ INVÁLIDO O MALA PRÁCTICA:
.1erBoton (Empieza con número)
.boton enviar (El espacio crea dos clases)
.boton_enviar (Se prefiere guión medio en CSS)

✅ VÁLIDO:
.boton-enviar
#seccion-1

❌ INVÁLIDO O MALA PRÁCTICA:
.1erBoton (Empieza con número)
.boton enviar (El espacio crea dos clases)
.boton_enviar (Se prefiere guión medio en CSS)

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

<button id="btn-compra">Comprar</button>
<button id="btn-compra">Comprar</button>


<button class="btn-compra">Comprar</button>
<button class="btn-compra">Comprar</button>

<button id="btn-compra">Comprar</button>
<button id="btn-compra">Comprar</button>


<button class="btn-compra">Comprar</button>
<button class="btn-compra">Comprar</button>

Alerta de error de validación HTML — Validadores y navegadores reaccionan diferente, pero técnicamente, duplicar un ID rompe el estándar web.

Resumen de Jerarquía

Para dominar CSS, visualiza los selectores como una pirámide: 1. **Base (Etiquetas):** Afectan a mucho, especificidad baja. 2. **Medio (Clases):** El equilibrio perfecto. Flexibles y modulares. 3. **Punta (IDs):** Muy específicos, uso restringido. Aprende a combinar los tres para una arquitectura robusta.

Pirámide de jerarquía de selectores — Estructura mental: Usa etiquetas para defaults, clases para diseño y IDs para excepciones o lógica.

¿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.