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:
Ejercicio en el que se estiliza mediante css un formulario html típico. Incluye solución.
Algunas webs muestran un teléfono en un lugar muy tentador en función de si es desktop o smartphone. Lo abordamos con css.
Ejercicio css dónde se muestra el código necesario para centrar verticalmente iconos flotantes en el lateral de una página web. Incluye solución.
La letra capital es un recurso medieval que no es de mi devoción pero que me sirve para darte un par de ejemplos prácticos de uso del pseudoselector ::first-letter.
Lo más importante que debéis aprender en este curso es como tabular correctamente vuestro código. Incluye imágenes de casos bien tabulados y mal tabulados.
::before y ::after tienen muchos usos interesantes para dar estilos en nuestros documentos web. Este conocimiento te puede ayudar por ejemplo a estilizar listas html
No Comments