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

0
(0)

Publicado

Aviso importante web en obras

Es posible que el contenido que estás visualizando tenga un formato un poco raro o que se haya perdido algún contenido. Esto se debe a que en 2023/09 decidí renovar la página y con más de 1000 escritos el trabajo de irlos revisando uno por uno es agotador. Poco a poco iré corrigiendo todos los contenidos. ¡Gracias por la comprensión!

portada ejercicio especificidad

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.

Veo veo ¿de qué color se verá? | ejercicio sobre especificidad css 1
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!

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *