Comprender la prioridad y la especificidad de los selectores en CSS es crucial para aplicar estilos de manera efectiva y resolver conflictos entre múltiples reglas.

Especificidad del Selector

La especificidad determina cuál regla de estilo prevalece cuando varias podrían aplicarse al mismo elemento. Cada tipo de selector tiene un valor de especificidad asignado:

• ID Selector: 100 puntos
• Class Selector: 10 puntos
• Type Selector: 1 punto

Ejemplo de Especificidad del Selector

Vamos a ver cómo diferentes selectores afectan un mismo elemento:

Y el siguiente HTML:

¿Qué color será el texto? El texto será verde porque el selector de ID tiene la mayor especificidad (100 puntos), superando al selector de clase (10 puntos) y al selector de tipo (1 punto).

Especificidad en Selectores Combinados

La especificidad también se acumula cuando combinamos selectores, permitiendo reglas más específicas y detalladas.

Ejemplo de Especificidad Combinada

Y el siguiente HTML:

¿Qué color será el texto? Aunque .text-highlight y #main-text p afectan al mismo elemento, el texto será verde porque #main-text p (especificidad de 101 puntos) tiene mayor especificidad que .text-highlight (10 puntos).

Orden de Carga

Cuando dos reglas tienen la misma especificidad, prevalece la que se define más tarde en el CSS.

Ejemplo de Orden de Carga

Ambas reglas tienen la misma especificidad, así que el texto será rojo, ya que esta regla se define después de la primera.

Importancia de !important

!important puede anular la especificidad y el orden de carga, pero debe usarse con precaución.

Ejemplo de !important

Aunque .text-highlight tiene una especificidad más alta, el texto será azul debido al !important.

Conclusión

La especificidad, el orden de carga, y el uso juicioso de !important son fundamentales para gestionar correctamente los estilos en CSS. Estos conceptos te ayudan a crear estilos más robustos y mantenibles.

El próximo tema será sobre los errores comunes con selectores, donde aprenderemos a evitar problemas frecuentes en el uso de CSS.