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:
Síntesis de pseudoelementos y pseudoselectores más usados. ¿Sabes en que se diferencían? ::root, ::before, :firt-child, :not(), ...
Apuntes de alumno y ejemplos de como usar la propiedad float y clear. Esta publicación forma parte del "tutorial css - apuntes de clase"
Maquetar con display:table; tiene ventajas frente a las tablas html. A modo de ejercicio se propone una tabla de servicios. Incluye solución.
Para cada propiedad se muestra un ejemplo visual del efecto de un valor positivo o negativo de top, right, bottom y left.
Ejercicio css del curso web ifcd0110 para practicar con los selectores más adecuados a poner en un fragmento de html. Incluye solución.
Ejercicio css dónde se plantea dividr una página en columnas utilizando 2 metodologías distintas. Las 2 importantes. Incluye solución.
No Comments