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:
En alguna páginas web el texto se decora cuando es seleccionado mediante el ratón. Aquí encontrarás toda la información de esta pseudo clase.
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 compara el centrado de contenidos en una caja con el centrado de una caja. Incluye solución completa.
Se muestran dos soluciones simples que usan exclusivamente CSS para el conocido reto de terminar un contenido con 3 puntos suspensivos. "..."
Ejercicio básico nivel principiante para practicar el uso de selectores CSS. Apuntos de alumno del curso web IFCD0110. Incluye solución.
En este ejercicio css se practica la creación de una paleta de colores mediante rgba. Además, se practican otros conceptos importantes como el selector de atributo. Incluye solución.
No Comments