Especificidad y precedencia del selector CSS

Cuando se aplican varios selectores CSS a un solo elemento, el navegador debe determinar qué selector tiene prioridad. Esto se conoce como especificidad del selector.

Reglas para determinar la especificidad del selector:

1. ! Anulación de estilos importantes y en línea:

   • Los estilos declarados con el indicador !important o en línea usando el atributo de estilo tienen el más alto prioridad.

2. Especificidad:

   • La especificidad de un selector está determinada por el número y el tipo de sus componentes:

     • #id tiene mayor especificidad que .classname
     • .classname tiene mayor especificidad que tagname

3. Prevalece la última regla:

   • Si dos selectores tienen la misma especificidad, el declarado el último en el archivo CSS tiene prioridad.

Ejemplo:

Considere las siguientes reglas CSS:

body { font-size: 14px; }
#header { font-size: 16px; }

Para el elemento

dentro del , se aplican ambas reglas. Sin embargo, dado que el selector #header tiene una mayor especificidad (#id > nombre de etiqueta), su valor de tamaño de fuente de 16 px se aplicará al elemento

.

Nota:

No es raro tener varias reglas dirigidas al mismo elemento con diferentes niveles de especificidad. Esto se puede utilizar para refinar estilos para casos específicos o anular reglas globales para casos específicos.