Cascada en CSS

<< Atributos !important >>

Como dijimos, uno de los conceptos más importantes en CSS es el de cascada.

<div id="contenido">Hola mundo </div>

Si nos fijamos, en el anterior código estamos aplicando estilos exactamente al mismo selector (div) y donde coincide la propiedad color con diferente valor, ¿Cuál de estas dos reglas prevalece? La respuesta es fácil, siempre prevalece la última regla definida, la cual mezcla y sobreescribe las propiedades definidas anteriormente. Es decir, es como si hubiéramos puesto:

div{
     padding: 8px;
     color: blue;
     background-color: grey;
}

Sin embargo, puede ocurrir que en determinados casos no esté tan claro cuál es el estilo que sobreescribirá a los anteriores. Veamos un ejemplo:

<div id="mensaje" class="error">Hola mundo </div>

En el ejemplo anterior tenemos un div con el atributo id con valor nombre, y el atributo class con valor error. ¿Qué estilo se va a aplicar dado el CSS? ¿Cuál tiene prioridad aquí? En este punto entra en juego el concepto de cascada. #id > .class > elemento

El navegador, para saber qué bloque de estilos tiene prioridad lo que hace es analizar: importancia(!important), especificidad y orden.

Apartados de esta sección
!important
Especificidad de los selectores
Orden

<< Atributos !important >>