JMiur [E]

Cuando agregamos definiciones o propiedades CSS no sólo debemos cuidar que la sintaxis sea correcta. Muchas veces, aunque todo parezca perfecto, nos vamos a encontrar con que ... no parecen funcionar. Por lo general, esto tiene una explicación: en el CSS hay un orden de prioridades que a veces tiene que ver con el orden real (qué está antes y qué está después) pero también con el valor específico del selector que usamos.

Un ejemplo, supongamos que tenemos este código HTML:
<p class="azul" id="rojo"> ... cualquier texto ... </p>
y estas definiciones de estilo:
#rojo {color: red;}
.azul {color: blue;}
A la etiqueta le estamos agregando dos atributos, id y class, en uno le decimos que el párrafo debe ser azul y en el otro que debe ser rojo ¿De que color se verá el texto?


¿de qué color será esto?

¿Importa el orden en que está escrito? No, sea como sea que lo escribamos, siempre será rojo porque un ID es "más importante" que una clase. Los selectores tienen un orden de prioridades, algo que la www.w3.org dice que podemos calcular con aritmética pero, por lo general, basta saber que esas prioridades existen para aprovecharse de ellas; el orden es más o menos este:
  1. lo que está definido en la etiqueta
  2. lo que está definido con un ID
  3. lo que está definido con una clase
  4. lo que está definido de manera genérica
Así que si tenemos esto:
p {color: green}
#rojo {color: red;}
.azul {color: blue;}

<p class="azul" id="rojo" style="color: yellow;"> ... cualquier texto ... </p>

el texto se verá de color amarillo

Lo mismo ocurre con definiciones más complejas como las listas; por ejemplo, si queremos resaltar un item:
<ul id="demo">
<li class="resaltado">primer item de una lista</li>
<li>segundo item de una lista</li>
<li>tercer item de una lista</li>
<li>cuarto item de una lista</li>
</ul>
definirlo así, no funcionará:
<style>
ul#demo li {color: #FFF;}
.resaltado {color: red; font-weight: bold;}
</style>

  • primer item de una lista
  • segundo item de una lista
  • tercer item de una lista
  • cuarto item de una lista

Porque lo que dice ul#demo li es más "poderoso" que lo que dice la clase resaltado; ahí es donde funciona bien la aritmética para calcular esas prioridades o el instinto que nos dice que podríamos hacer esto:
<style>
ul#demo li {color: #FFF;}
ul#demo li.resaltado {color: red; font-weight: bold;}
</style>

  • primer item de una lista
  • segundo item de una lista
  • tercer item de una lista
  • cuarto item de una lista

Y si eso no nos convence, siempre nos queda la posibilidad de agregar la palabra !important:
<style>
ul#demo li {color: #FFF;}
.resaltado {color: red  !important;font-weight: bold  !important;}
</style>

  • primer item de una lista
  • segundo item de una lista
  • tercer item de una lista
  • cuarto item de una lista

12 comentarios:

Felipe  

Gracias por recordarnos estos aspectos que son clave a la hora de lograr que los cambios en nuestros blogs funcionen :D ..aunque por allí he escuchado que por ejemplo a las plantillas "nuevas" de blogger ni los !important le importan. ;)

Responder
JMiur  

No. Eso no es cierto. En todo caso, lo que es posible es que esos cambios sean mucho más complejos ya que esas plantillas ´han sido creadas apra no ser modificadas pero, de ninguna manera siguen reglas diferentes a las reglas generales de los navegadores ... no porque no quieran sino porque no pueden.

Responder
Gizaa Veiga  

Pra mim que estou aprendendo ainda esse post foi ótimo!

Obrigado!

Responder
Graciela  

Esto hay que guardarlo :)
Las nuevas necesitan un terapeuta 'no porque no quieran sino porque no pueden' :S

Ahora el error 503, también sale en el formulario de comentar, está en todos lados caramba!

Responder
mamadealess  

Hola !!!!..ya decia yo que no era tan bruta :)...ahora entiendo porque algunas cosas aparentemente sencillas no me salian !!!....terminaba por borrar todo y darme por vencida!!!...Gracias!!!...te sigo siempre, aunque no escriba!!

Responder
La hormiguita  

Muy bueno... de a poco voy entendiendo.... gracias :)

Responder
OSjERiCk  

Gracias JMiur, lo tendré en cuenta. Oye! qué será que en unos casos he utilizado la pseudo-class a:active, y no funciona, utilizo la misma declaración que ya está en la platilla para a:hover de la clase o el id correspondiente a lo que quiero agregar el a:active.

Responder
Oloman  

Lo podía imaginar, pero lo cierto es que no sabía a ciencia cierta cual era la prioridad entre os elementos que comentas.

Ahora sí :D

Responder
Daniel  

Grande! Eres un libro abierto. Das auténticas clases magistrales de HTML.

Mil gracias.

Responder
JMiur  

Gtacias, Gizaa Veiga, obrigado :D

Graciela: Y los viejos necesitamos un manicomio :D

mamadealess: Hay que tener paciencia porque la respuesta está ahí, en alguna parte pero a todos nos pasa lo mismo. Gracias por el comentario :-)

Me alegra eso, La hormiguita.

OSjERiCk: Piuede ser muchas cosas. Ahí también hay un orden a seguir:
a:link
a:visited
a:hover
a:active
el active siempre debe estar luego del hover o sino, no funcionará.

Oloman: Esta todo documentado y con formulas aritméticas para poder calcularlo cosa que claro, ninguno de nosotros hará :D

Gracias por el comentario, Daniel. Exagerado pero gracias igual.

Responder
Graciela  

Ojalá vayamos a parar al mismo jajaja
Me ha dicho vieja :O

Responder
JMiur  

Yo hablaba de mi pero ... súbase al colectivo y vamos :D

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR