¡Suscríbete a mi canal de Youtube!

Donaciones

▷ 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

  1. Ancestros (Ancestor): Todos los elementos superiores en la jerarquía de un nodo. Ejemplo: <div id="root"> es ancestro de <p>.

  2. 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">.

  3. Padre (Parent): El elemento inmediato superior de un nodo. Ejemplo: <section> es el padre del primer <p>.

  4. Hijo (Child): Un nodo directamente contenido dentro de otro. Ejemplo: <h1> es hijo de <header>.

  5. 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:

  1. Importancia: Las reglas con !important tienen la máxima prioridad.
  2. Especificidad: Los selectores más específicos tienen más peso.
  3. 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

Entradas populares

Seguidores del blog

Suscríbete al blog

Recibe mis nuevas publicaciones por email: