Veo veo ¿de qué color se verá? | ejercicio sobre especificidad css

Veo veo ¿de qué color se verá? | ejercicio sobre especificidad css

Print Friendly, PDF & Email
Valora esta entrada

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;}y p.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.
Solución ejercicio especificidad
Solución ejercicio especificidad

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!

Francesc Ricart
hola@francescricart.com

Aprender y enseñar. Enseñar y aprender. En el ámbito docente soy docente ocupacional. En el ámbito profesional consultor web. Ofrezco servicios de mejora continua y mantenimiento web. ¿Qué quieres aprender hoy? Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.