CSS: Orden de prioridades

Cuando agregamos definiciones o propiedades CSS no sólo debemos cuidar que la sintaxis sea correcta. Muchas veces, aunque todo parezca perfecto, nos vamos a encontrar con que ... no parecen funcionar. Por lo general, esto tiene una explicación: en el CSS hay un orden de prioridades que a veces tiene que ver con el orden real (qué está antes y qué está después) pero también con el valor específico del selector que usamos.

Para obtener dicho valor, tendremos que calcular la tupla (A, B, C, D), donde:

• A = estilo en línea
• B = número de IDs
• C = número de clases
• D = número de marcas HTML

Veamos el siguiente ejemplo

¿Cuál es el valor de cada uno de estos selectores?

• #caja .cabecera h1 = 0, 1, 1, 1 (valor 111)
• #caja header h1 = 0, 1, 0, 2 (valor 102)
• .cabecera h1 = 0, 0, 1, 1 (valor 11)
• header = 0, 0, 0, 1 (valor 1)
• h1 = 0, 0, 0, 1 (valor 1)

¿Cuál sería el resultado si se aplicaran todos estilos a un título <h1>¡Sé tú mismo!<h1/> ?

¡Efectivamente! La primera sentencia ganaría con un valor de 111, por lo que el color del texto como resultado saldría blanco.