24 Abr Veo veo ¿de qué color se verá? | ejercicio sobre especificidad css
En este ejercicio vamos a aplicar el concepto de especificidad, orden de selectores CSS y la instrucción !important .
En esta entrada puedes encontrar los apuntes CSS correspondientes.
Recordar que muchas veces la intuición puede fallar, aunque en líneas generales:
- Cuanto más cerca está una instrucción de la etiqueta html mas fuerza.
- Ante la duda, suele ganar la instrucción más restrictiva.
- A igualdad de peso, la última propiedad css reemplaza las anteriores.
Entremos en materia.
Enunciado
A continuación se facilita el siguiente código html y css.
¿Simplemente leyendo el código sabrías decir de que color se verá cada párrafo?
Anótalo en una hoja de papel antes de mirar la solución final.
¡Recuerda que la intuición a veces falla!
<!DOCTYPE html>
<html>
<head>
<title>ejercicio css</title>
<meta name="author" content="francesc ricart" />
<style>
.rojo{color:red !important;}
p.rojo{color:yellow;}
#verde{color:green;}
#naranja{color:orange;}
.rosa{color:pink;}
</style>
</head>
<body>
<p class="rojo" id="naranja">hola que tal</p>
<p class="rojo"><span>hola que tal</span></p>
<p id="verde">hola que tal</p>
<p class="rosa" id="naranja">hola que tal</p>
<p style="color:blue;" class="rosa">hola que tal</p>
</body>
</html>Solución del ejercicio
En el día a día no siempre vamos a resolverlo haciendo una tabla de especificidad.
Voy a resolver el ejercicio de cabeza sin necesidad de tablas.
En líneas generales:
- Al primer párrafo le afectan las instrucciones
.rojo{color:red !important;}y#naranja{color:orange;}.En condiciones normales ganaría el selector de id pero como el primer selector lleva un !important el resultado es que se ve de color rojo. - Al primer párrafo le afectan las instrucciones
.rojo{color:red !important;}yp.rojo{color:yellow;}En condiciones normales ganaría el selector de clase con etiqueta pero como el primer selector lleva un !important el resultado es que se ve de color rojo y no amarillo. - Para el tercer párrafo no hay discusión posible.
- En el cuarto párrafo entran en conflicto una clase y un identificador. Gana el identificador.
- En el quinto párrafo entran en conflicto un css dentro del atributo style y una clase. Gana el style por ser muchísimo más específico.
Podemos aplicar la lógica !important > style = «» > id > class > etiquetas
¡Hola!
Querido lector,
Espero que este ejercicio te haya resultado de utilidad.
¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!
Entradas relacionadas:
La propiedad background se desarrolla en muchísimas variantes que permiten generar efectos muy interesantes. Veámoslas todas.
Qué es la propiedad opacity de css y como podemos usarla. Atención porqué para transaprencias no siempre es la mejor opción.
¿Hay alguna forma amable de leer páginas web dónde todo el contenido se haya compactado? Te presento algunas de mis herramientas favoritas.
Síntesis de pseudoelementos y pseudoselectores más usados. ¿Sabes en que se diferencían? ::root, ::before, :firt-child, :not(), ...
Se explica que es el CSS, que significa en realidad el acrónimo y porqué se le llama así y hacemos una primera toma de contacto con este lenguaje web.
Resumimos los principales factores que deberemos tener en cuenta desde el punto de vista de alguien que ha estudiado un curso de confección y publicación de páginas web para la optimización y mejora d...
No Comments