Temas de CSS

Propiedades CSS

CSS Documentos

Jerarquía CSS

16/03/2023
CSS Hierarchy

La precedencia de CSS es la precedencia jerárquica de todos los CSS asignados a las etiquetas HTML.

¿Cuáles son las prioridades de las reglas CSS utilizadas para formatear etiquetas HTML? ¿Cuándo y en qué situaciones se utiliza el concepto de !importante?

Conceptos que afectan el orden de prioridad de CSS

  • CSS en línea (CSS aplicado directamente en la etiqueta)
  • CSS interno (CSS aplicado entre etiquetas <style></style> en la misma página).
  • CSS externo (CSS aplicado externamente (desde la ruta del archivo u otro sitio web) con la etiqueta <link>).
  • Class
  • Id
  • !important

Id > Class > Etiqueta HTML

¿Qué propiedades CSS otorgadas a las etiquetas Class, ID y HTML tienen prioridad?

Si una etiqueta HTML tiene ID, Class como tipo de CSS interno y una regla CSS que se aplica directamente a la etiqueta HTML, el navegador aplicará el orden de precedencia de CSS ID > Class > Etiqueta HTML.

Inline > Internal > Prioridad de CSS externo

En la aplicación de tipos de CSS externo, interno y en línea, el orden de prioridad de CSS será en línea > interno > externo en el lado del navegador.

Nota: el código CSS externo se puede ver en la pestaña CSS.

Sin embargo, esta priorización solo se aplica si cada tipo de implementación de CSS se usa de la misma manera. Por ejemplo, en el uso de CSS externo e interno, ambos deben aplicarse al id o clase o etiqueta HTML, el orden de prioridad también cambiará en diferentes casos.