Como se ha visto, los estilos se aplican en cascada, pero cuando varios selectores afectan al mismo elemento se debe comprobar la especificidad.
- Selectores de tipo (h1) y pseudo-elementos (::before).
- Selectores de clase (.example), selectores de atributos ( [type="radio"]) y pseudo-clases (:hover).
- Selectores de ID (#example).
#id{
color:red;
}
p{
color:blue;
}
¿De qué color seré?
A pesar de que el estilo a los elementos <p> está después del #id, como ambos son de aplicación al mismo elemento se debe aplicar la especificidad y el estilo por id tiene un valor mayor (2) que el selector p
¿De qué color seré?
Como ya no tiene atributo id sí es de color azul
Combinadores
El selector universal (*), los combinadores (+, >, ~, ' ') y la pseudo-clase de negación (:not()) no tienen efecto sobre la especificidad. (Sin embargo, los selectores declarados dentro de :not() si lo tienen.)
#id{
color:red;
}
p{
color:blue;
}
*{
color:purple;
}
A pesar de estar la declaración universal para el color de texto esta no afecta a los párrafos que se rigen por la especificidad antes comentada.
Declaración directa de estilos
En el caso de que un elemento sea objeto de una declaración directa, ésta siempre tendrá preferencia sobre las reglas heredadas de su ancestro.
#id{
color:red;
}
p{
color:blue;
}
*{
color:purple;
}
#contenedor{
padding: 5px;
width: 300px;
background-color: lightcyan;
color: grey;
}
Soy de color azul a pesar de que mi padre pone el color gris a través de un selector id con más especificidad
Inicio