Tema 2 · Sintaxis y Cascada

Selectores, Combinadores y Cascada

Domina los selectores simples, los combinadores jerárquicos (descendientes, hijos directos) y comprende cómo la cascada y la especificidad resuelven conflictos de diseño.

Introducción a CSS3 y Sintaxis Colores Web, Fondos y Gradientes

Selectores Básicos de CSS

Los selectores indican al navegador qué elementos HTML deben recibir las reglas visuales. Elegir el selector adecuado es clave para mantener un código limpio y escalable.

Tipo de Selector Sintaxis Ejemplo Descripción
Universal * * { box-sizing: border-box; } Afecta a todos y cada uno de los elementos del documento.
Por Etiqueta etiqueta p { line-height: 1.6; } Selecciona todos los elementos HTML de ese tipo (ej. todos los <p>).
Por Clase .nombre-clase .alerta { background: #fee2e2; } Aplica a cualquier elemento con class="alerta". Reutilizable múltiples veces.
Por ID #identificador #menu-principal { display: flex; } Aplica al elemento único que posea ese id en la página.
Agrupador sel1, sel2 h1, h2, h3 { color: #0f172a; } Aplica los mismos estilos a múltiples selectores separados por comas.

Combinadores de Relación Jerárquica

Permiten seleccionar elementos basándose en su ubicación respecto a otros elementos en el árbol HTML:

  • Descendiente (espacio en blanco): div p selecciona todos los <p> que se encuentren dentro de un <div>, sin importar la profundidad.
  • Hijo directo (>): ul > li selecciona solo los <li> que sean hijos inmediatos del <ul>.
  • Hermano adyacente (+): h2 + p selecciona el párrafo que viene inmediatamente después de un <h2> al mismo nivel.
  • Hermano general (~): h2 ~ p selecciona todos los párrafos que sigan al <h2> dentro del mismo contenedor padre.

Especificidad y la Regla de Cascada

Cuando dos o más reglas aplican sobre el mismo elemento con propiedades en conflicto, el navegador resuelve la disputa usando el cálculo de especificidad (peso numérico):

Nivel Tipo de Regla Peso Relativo Ejemplo
1 Estilo en línea (Inline) 1000 style="color: red;"
2 Identificador (ID) 100 #encabezado
3 Clases, atributos y pseudoclases 10 .boton, [type="text"], :hover
4 Elementos y pseudoelementos 1 p, h1, div, ::before

Nota: La cláusula !important sobrescribe toda especificidad. Debe usarse con extrema prudencia y solo como último recurso para evitar hojas de estilo difíciles de mantener.

Diagrama Técnico: La Pirámide de Especificidad y Cascada en CSS3

Diagrama 2.1: Jerarquía de pesos de especificidad en CSS3 y caso de combate entre selectores.

⚡ Demostración de Selectores y Especificidad

Observa cómo los selectores de clase, combinadores de hijo directo y selectores de ID toman precedencia sobre selectores simples de etiqueta:

index.html
Solo lectura 
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Selectores y Cascada CSS</title>
  <style>
    body {
      font-family: Arial, Helvetica, sans-serif;
      padding: 25px;
      background-color: #f8fafc;
      color: #1e293b;
    }

    /* 1. Selector de etiqueta básica (peso 1) */
    p {
      color: #64748b;
      font-size: 1rem;
    }

    /* 2. Selector de clase (peso 10) - Gana sobre 'p' */
    .texto-destacado {
      color: #0284c7;
      font-weight: bold;
    }

    /* 3. Selector por ID (peso 100) - Gana sobre clases */
    #mensaje-especial {
      color: #059669;
      font-size: 1.15rem;
      border-left: 4px solid #059669;
      padding-left: 12px;
    }

    /* Combinador de hijo directo ( > ) */
    .lista-cursos > li {
      background: #ffffff;
      margin-bottom: 8px;
      padding: 10px 15px;
      border-radius: 6px;
      border: 1px solid #e2e8f0;
      list-style: none;
    }

    /* Combinador descendiente */
    .contenedor-articulos p {
      background-color: #eff6ff;
      padding: 12px;
      border-radius: 6px;
    }
  </style>
</head>
<body>

  <h2>Prueba de Especificidad en Kilopolis</h2>

  <p>Párrafo común (Aplica estilo de etiqueta: color grisáceo).</p>

  <p class="texto-destacado">Párrafo con clase .texto-destacado (Gana la clase: color celeste).</p>

  <p id="mensaje-especial" class="texto-destacado">
    Párrafo con ID y clase al mismo tiempo (¡Gana el ID #mensaje-especial: color verde!).
  </p>

  <h3>Cursos con combinador de hijo directo (.lista-cursos &gt; li):</h3>
  <ul class="lista-cursos" style="padding-left: 0;">
    <li>Curso de CSS3 Profesional</li>
    <li>Curso de JavaScript Moderno</li>
    <li>Curso de Arquitectura Fullstack</li>
  </ul>

</body>
</html>
Pruébalo tú mismo » Se abre en una nueva pestaña con ejecución en vivo
🦉
¿Tienes dudas con este tema?
Sócrates AI puede darte analogías y explicarte este código paso a paso.

🚀 ¿Quieres dominar Manual Completo de CSS3, Flexbox y Grid y crear proyectos reales?

Aprende arquitectura limpia, desarrollo web moderno, buenas prácticas y despliegue en producción con nuestro Bootcamp Fullstack Developer con mentorías en vivo.

📖 Cuaderno HTML/CSS/BS5 Conocer el Bootcamp

🏛️ Autoría y Propiedad Intelectual: Obra educativa original de David Amador para Kilopolis Academia (Solucionáticos), estructurada sobre las especificaciones y estándares abiertos del W3C, el estándar vivo de WHATWG y la documentación oficial de código abierto. © Todos los derechos reservados.