Bitácora Parcial 3
Especificidad CSS
Ideas principales
- La especificidad es el mecanismo que usan los navegadores para decidir qué reglas de estilo aplicar a un elemento cuando hay varias reglas que afectan al mismo elemento.
- Se aplica solo cuando un elemento tiene varias declaraciones CSS dirigidas a él.
- Los estilos directos tienen mayor prioridad sobre los heredados de elementos anteriores.
- Si varias reglas tienen la misma especificidad, la última regla en el CSS será la que se aplique.
- Estilos en línea: Se aplican directamente al elemento.
- ID: Los selectores ID tienen alta especificidad.
- Clases, atributos y pseudo-clases: Tienen una especificidad intermedia.
- Elementos y pseudo-elementos: Tienen la especificidad más baja
- El selector universal (*) y los valores heredados tienen una especificidad de 0, es decir, no afectan la jerarquía de especificidad.
- El uso de !important anula otras reglas, independientemente de la especificidad.
- No se recomienda usar !important porque rompe la cascada natural de las hojas de estilo.
- Si hay dos reglas en conflicto con !important, se aplicará la que tenga mayor especificidad.
Apuntes de la clase
Es el medio por el cual los navegadores deciden que valores de propiedad CSS son los más relevantes para un elemento, y por lo tanto, se aplicaran.
Solo se aplica cuando el mismo elemento es el objetivo de varias declaraciones. Según las reglas de css, los elementos dirigidos directamente siempre tendrán prioridad sobre las reglas que un elemento hereda de su antepasado.
Cuando varias declaraciones tienen la misma especificidad, la última declaración encontrada en css se aplica al elemento.
Jerarquia de especificidad
Cada selector tiene su ligar en la jerarquía de especificidad. Hay cuatro categorías que definen el nivel de especificidad de un selector
- Primer nivel- estilos en línea, se adjunta directamente al elemento
- Segundo nivel- id
- Tercer nivel- clases, atributos y pseudo-clases
- Cuarto nivel- elementos y pseudo-elementos
Reglas de especificidad
La última regla cuenta: si la misma regla se escribe dos veces en la hoja de estilo externa, entonces la regla inferior en la hoja de estilo está más cerca del elemento que se va a diseñar y, por lo tanto, se aplicara: siempre se apicara la última regla.
Selector universal
El selector universal y los valores heredados tienen una especificidad de 0-*, el cuerpo* y similares tienen una especificidad cero. Los valores heredados también tienen una especificidad de 0.
La excepción !important
Cuando se usa una regla !important en una declaración de estilo, esta declaración anula cualquier otra declaración. Aunque técnicamente !important no tienen nada que ver con la especificidad, interactúa directamente con ella. Sin embargo, usar !important es una mala práctica y debe evitarse porque dificulta la depuración al romper la cascada natural en sus hojas de estilo.
Cuando se aplican dos declaraciones en conflicto con la regla !important al mismo elemento, se aplicará la declaración con una mayor especificidad.
Resumen
La especificidad en CSS determina qué reglas de estilo se aplican a un elemento cuando múltiples reglas afectan al mismo elemento. Se aplica cuando el mismo elemento tiene varias declaraciones CSS.
Estilos en línea: Tienen la mayor prioridad, ya que se aplican directamente al elemento. ID: Los selectores de ID tienen alta especificidad. Clases, atributos y pseudo-clases: Tienen una especificidad media. Elementos y pseudo-elementos: Tienen la especificidad más baja.
La última regla cuenta: Si dos reglas tienen la misma especificidad, se aplicará la última que se encuentre en el CSS. El selector universal (*) y los valores heredados tienen una especificidad de 0.
El uso de !important hace que esa regla anule cualquier otra, independientemente de la especificidad. No se recomienda usar !important, ya que rompe la lógica de cascada de los estilos. Si se aplican dos reglas con !important al mismo elemento, se aplicará la regla con mayor especificidad.