45.4 Especificidad, cascada y herencia

Cuando se asignan estilos usando diferentes tipos de selectores (id, class, universal, atributos, etc) es posible que a un elemento aparentemente le sea aplicable más de una regla CSS. También es posible que una regla de estilo que cree para un elemento no sea aplicada como usted lo espera. La forma en que esto ocurre está ligada a las propiedades de cascada, herencia y especificidad propias del lenguaje CSS. La especificidad se refiere a la jerarquía en las reglas definidas para los selectores, mientras que cascada significa que para dos reglas con la misma especificidad, aplica la que esté en último lugar en el archivo CSS (o en el elemento style, en el encabezado), y la herencia hace referencia a que, para algunas propiedades, los elementos internos de otro elemento (elementos hijos) heredan la propiedad del elemento padre.

Niveles de especificidad

Los selectores más específicos son los que tienen prioridad. Así pues, el orden de especificidad (descendente) en selectores está dado por:

Estilos “en línea”
Selectores de id
Selectores de clase
Selectores de tipo y pseudo-elementos.
Selector universal

La excepción !important es un comando que se puede añadir a alguna propiedad a la que se desee dar prioridad, no tiene en cuenta la jerarquía y está por encima de cualquier especificidad. Los manuales recomiendan limitar el uso de esta excepción a situaciones muy particulares.

Ejemplo

<!DOCTYPE html>
<HTML>
  <head>
    <style>
        body {color: green;}
        p {color: darkblue;}
        .rojizo {color: red;}
        #parrafodeoro {color: gold;}
        #morado {color: purple;}
        h4 {color: orange !important;}
    </style>
  </head>
  
  <body>
    <h2> Subtítulo sin estilo asignado, hereda la propiedad 'color' del elemento que lo contiene (body). </h2>
    <p> Párrafo con estilo asignado a todos los párrafos.</p>
    <h3 class = "rojizo"> Subtítulo rojo</h3>
    <p class = "rojizo"> Texto rojo, el selector de clase tiene prioridad sobre el selector de elementos p</p>
    <p class = "rojizo" id = "parrafodeoro" > Párrafo dorado, muestra la prevalencia del selector id sobre el selector de clase.</p> 
    <h4 id = "morado" style ="color: yellow;" > Texto naranja, muestra la prevalencia de la excepción !important </h4>
  </body>
</HTML>

Subtítulo sin estilo asignado, hereda la propiedad ‘color’ del elemento que lo contiene (body).

Párrafo con estilo asignado a todos los párrafos.

Subtítulo rojo

Texto rojo, el selector de clase tiene prioridad sobre el selector de elementos p

Párrafo dorado, muestra la prevalencia del selector id sobre el selector de clase.