▷ Herencia y Prioridad CSS 【 TEORÍA 】
Herencia y Prioridad en CSS
La herencia y la prioridad en CSS son conceptos clave para entender cómo se aplican los estilos en un documento HTML. Estos principios determinan qué reglas se aplican a qué elementos y en qué orden.
¿Qué es la Herencia?
La herencia en CSS es el proceso mediante el cual ciertos estilos aplicados a un elemento se transmiten automáticamente a sus elementos secundarios. No todos los estilos se heredan de manera predeterminada; los relacionados con texto (como color
, font-family
) sí, mientras que otros (como margin
o padding
) no.
Ejemplo:
<div style="color: blue;">
<p>Este texto será azul porque hereda el color del elemento padre.</p>
</div>
¿Qué es el Árbol de Documento?
El árbol de documento, o DOM (Document Object Model), es una representación jerárquica de los elementos en una página HTML. Cada elemento es un nodo, y las relaciones entre ellos forman una estructura de árbol.
Ejemplo:
<div id="root">
<header>
<h1>Título Principal</h1>
</header>
<main>
<section>
<p>Un párrafo dentro de una sección.</p>
</section>
<aside>
<p>Texto en el aside.</p>
</aside>
</main>
</div>
Tipos de Ascendencia y Descendencia
-
Ancestros (Ancestor): Todos los elementos superiores en la jerarquía de un nodo. Ejemplo:
<div id="root">
es ancestro de<p>
. -
Descendientes (Descendants): Todos los elementos que están dentro de un nodo, sin importar el nivel de profundidad. Ejemplo:
<p>
es descendiente de<div id="root">
. -
Padre (Parent): El elemento inmediato superior de un nodo. Ejemplo:
<section>
es el padre del primer<p>
. -
Hijo (Child): Un nodo directamente contenido dentro de otro. Ejemplo:
<h1>
es hijo de<header>
. -
Hermanos (Siblings): Nodos que comparten el mismo padre. Ejemplo:
<section>
y<aside>
son hermanos porque ambos están dentro de<main>
.
Ejemplo con el Árbol de Documento
/* Selección de descendientes */
div p {
font-size: 16px;
}
/* Selección de hijos directos */
main > section {
background-color: lightgray;
}
/* Selección de hermanos */
section + aside {
border-left: 2px solid black;
}
Prioridad CSS
La prioridad CSS determina qué reglas se aplican cuando hay múltiples estilos que afectan el mismo elemento. Esta prioridad se rige por las siguientes reglas:
- Importancia: Las reglas con
!important
tienen la máxima prioridad. - Especificidad: Los selectores más específicos tienen más peso.
- Orden: Si dos reglas tienen la misma especificidad, se aplica la que aparece más tarde en el código.
Especificidad de Selectores
La especificidad se calcula asignando valores a los selectores:
- Selectores de ID (
#id
): 100 puntos. - Selectores de clase (
.clase
), atributos y pseudo-clases: 10 puntos. - Selectores de etiqueta (
etiqueta
) y pseudo-elementos: 1 punto.
Ejemplo:
/* Especificidad 1 (etiqueta) */
h1 {
color: blue;
}
/* Especificidad 10 (clase) */
.titulo {
color: green;
}
/* Especificidad 100 (ID) */
#principal {
color: red;
}
/* Resultado: el texto será rojo */
<h1 id="principal" class="titulo">Texto Ejemplo</h1>
Uso de !important
La declaración !important
sobrescribe cualquier otra regla, independientemente de su especificidad o posición en el código.
Ejemplo:
h1 {
color: blue !important;
}
#principal {
color: red;
}
/* Resultado: el texto será azul debido a !important. */
<h1 id="principal">Texto Ejemplo</h1>
Entender la herencia, las relaciones jerárquicas del DOM y la prioridad en CSS te permitirá aplicar estilos de manera más eficiente y evitar conflictos. Practica con ejemplos reales para dominar estos conceptos fundamentales.
En este video te enseño un poco de teoría respecto a la herencia y prioridad CSS al desarrollar el FrontEnd de tu sitio web.
No te olvides darle LIKE y SUSCRIBIRTE al blog y a mi canal si te gustó el video. Si gustas realizar una DONACIÓN para ayudarme a mejorar el canal y mi contenido, puedes hacerlo mediante el botón ❤$GRACIAS ubicado en la parte posterior del video en YouTube o visitando el enlace https://linktr.ee/ezavalar y haciendo clic en el botón Donaciones.
Comentarios
Publicar un comentario
Cuéntame que opinas acerca del artículo. Recuerda ser respetuoso si quieres que se publique tu comentario 😊