Cascada y Especificidad en CSS

CSS se basa en dos conceptos fundamentales para determinar cómo se aplican los estilos a los elementos HTML: la cascada y la especificidad. Comprender estos conceptos es clave para controlar con precisión el diseño de tus páginas web.

1. La Cascada

La cascada es el proceso por el cual el navegador decide qué reglas CSS aplicar cuando hay múltiples reglas que coinciden con un mismo elemento. CSS se denomina “Cascading Style Sheets” porque las reglas se aplican en un orden específico:

• Orden de Aparición: Si varias reglas se aplican a un mismo elemento, la última regla en el código (la más cercana al final del archivo CSS) prevalece sobre las anteriores.
• Herencia: Algunos estilos pueden ser heredados por los elementos hijos de un elemento padre. Por ejemplo, si aplicas un color de texto a un div, ese color se aplicará también a los textos de todos sus elementos hijos, a menos que se sobrescriba.
• Importancia: Si se usa !important en una regla, esta tendrá la máxima prioridad y sobrescribirá otras reglas, incluso si son más específicas o vienen después en el código.
• Ejemplo de Cascada:

p {
    color: blue;
}

p {
    color: red;
}

• En este caso, el texto del párrafo será rojo porque la última regla en la cascada es la que se aplica.

2. Especificidad

La especificidad es un cálculo matemático que CSS utiliza para determinar cuál de las reglas coincidentes se aplica. Se basa en el tipo de selectores utilizados en las reglas.

• Reglas de Especificidad:
  • Selectores de Tipo: p, h1, div (baja especificidad).
  • Selectores de Clase y Atributos: .clase, [atributo] (media especificidad).
  • Selectores de ID: #id (alta especificidad).
  • Estilo Inline: style="..." (máxima especificidad sin !important).
• Cálculo de Especificidad:
  • Selectores de Tipo: 0,0,1,0 (1 punto por cada selector de tipo).
  • Selectores de Clase: 0,0,0,1 (10 puntos por cada clase).
  • Selectores de ID: 0,1,0,0 (100 puntos por cada ID).
  • Estilo Inline: 1,0,0,0 (1,000 puntos).
  • !important: No cambia la especificidad pero hace que la regla tenga la máxima prioridad.
• Ejemplo de Especificidad:

p {
    color: blue; /* 0,0,1,0 */
}

.clase {
    color: green; /* 0,0,0,1 */
}

#id {
    color: red; /* 0,1,0,0 */
}

Si un párrafo tiene tanto una clase como un ID aplicado, el color del texto será rojo, ya que #id tiene la mayor especificidad.