Cascada, especificidad y herencia
Cuando dos reglas compiten
¿Qué pasa si dos reglas distintas le dicen cosas distintas al mismo elemento? CSS necesita decidir cuál gana — a eso se le llama cascada.
La versión simple, la que cubre la enorme mayoría de los casos:
- La regla más específica gana (una clase le gana a una etiqueta; un id le gana a una clase).
- Si dos reglas son igual de específicas, gana la que está después en el archivo.
p {
color: black;
}
.destacado {
color: red;
}Un párrafo con class="destacado" queda rojo — la clase es más específica que la etiqueta sola, sin importar el orden en que estén escritas las reglas.
¿Qué color gana?
Responde estas preguntas para verificar tu comprensión.
Pregunta 1
p { color: blue; }
p { color: green; }Un párrafo sin ninguna clase. ¿De qué color queda?Pregunta 2
p { color: blue; }
.aviso { color: red; }<p class="aviso">Texto</p> ¿De qué color queda?Herencia
Algunas propiedades CSS, cuando se aplican a un elemento, también las heredan sus elementos hijos automáticamente — sin que nadie escriba una regla para ellos. Es lo que pasa, por ejemplo, con propiedades de texto.
body {
font-family: Arial, sans-serif;
color: #333;
}No hace falta repetir font-family y color en cada párrafo, título o lista de la página — todos los elementos dentro de <body> las heredan solos. Por eso es tan común definir la tipografía general del sitio en body una sola vez.
No todas las propiedades se heredan — border, padding o background-color, por ejemplo, no pasan de un elemento a sus hijos. Tiene sentido: si el borde de un contenedor se heredara, cada elemento de adentro tendría su propio borde también, y ese no es el comportamiento que uno esperaría.
Probá vos: estilo general en body
Definí font-family y color una sola vez, en body, y comprobá en la vista previa que el título y el párrafo lo heredan sin que hayas escrito ninguna regla para ellos.
¿Se hereda o no?
Responde estas preguntas para verificar tu comprensión.