Unidad 9. Hojas de estilo CSS. Sintaxis. Selectores (XIII)

Para ver por qué se han resuelto de esta forma debemos explicar antes las normas que se aplican para resolver colisiones. Estas normas se aplican en el siguiente orden de preferencia:

1. Importancia

2. Especificidad

3. Orden del código

Vamos a verlas una por una.

1. Importancia.

Si aparece la instrucción !important en una regla, esta tiene preferencia sobre todas las demás cuando hay una colisión.

Por lo tanto en el caso d) del ejemplo anterior:

.clase_gris { color: gray !important; }

d) En el párrafo siete se han aplicado dos clases con distinto atributo color, class="clase_gris" y class="clase_azul", y en la página web se muestra el color gris porque la clase_gris tiene la instrucción !important.

(Si no estuviera la instrucción !important, el color sería azul porque, como veremos en otra norma, la clase_azul se ha definido detrás de la clase_gris.)

Se recomienda utilizar esta instrucción !important lo menos posible ya que rompe el resto de normas y puede hacer dificil depurar los estilos.

2. Especificidad.

La especificidad se refiere al número de etiquetas que es capaz de abarcar un selector, de mayor a menor especificidad tenemos:

1) Los estilos declarados dentro de la propia etiqueta, ya que sólo afectan a esa misma etiqueta.

2) Los selectores id, ya que en una página web sólo debe haber un id con un valor determinado.

3) Los selectores de clase, selector de atributo o pseudoclase, ya que debemos escribirlos específicamente en el código HTML.

4) Los selectores de etiqueta, ya que no hace falta escribirlos en el código HTML para que afecten a muchas etiquetas.

Volviendo a nuestro ejemplo, en el caso b) En el párrafo cuatro se han aplicado dos selectores con distinto atributo color, class="clase_azul" y id="id_negrita", y en la página web se muestra el color verde ya que el selector id es más específico que el selector class.

Recordemos el estilo de nuestro ejemplo:

 p { font-style: italic }
.clase_gris { color: gray !important; }
.clase_rojo { color: red; font-weight: bold }
.clase_azul { color: blue; }
#id_negrita { font-weight: bold;
      color: green }

Y el código HTML:

<h3>Cabecera h3.</h3>
<p>Párrafo uno cursiva.</p>
<p class="clase_rojo clase_azul" >Párrafo dos con clase rojo y azul.</p>
<p class="clase_azul">Párrafo tres con clase azul.</p>
<p id="id_negrita"  class="clase_azul">Párrafo cuatro con id negrita y clase azul</p>
<div> Texto cinco dentro de div. </div>
<p style="font-style: normal">Párrafo seis con estilo en la etiqueta.</p>
<p  class="clase_gris clase_azul">Párrafo siete con clase !important.</p>

Resultado producido:

3. Orden del código

Cuando hay empate tras aplicar las reglas de importancia y especificidad, se aplica la regla del orden del código: se aplica el selector que se definió más tarde. El caso más frecuente de este tipo es cuando la colisión es entre un selector definido en un archivo externo y un selector definido en la cabecera del mismo archivo, tendrá preferencia este último.

En nuestro ejemplo, en el caso a) En el párrafo dos hay una colisión porque se han aplicado dos clases con distinto atributo color, class="clase_rojo" y class="clase_azul", y en la página web se muestra el color azul, que la clase_azul se definió detrás de la clase_rojo.

Al aplicar todas estas reglas hay que tener claro, como ya hemos dicho, que las colisiones se producen a nivel de atributos, no de reglas. Siempre se aplican todas las reglas que afectan a una etiqueta, pero si hay una colisión puede que no se aplique un atributo de esa regla, pero sí se aplica el resto de la regla. Por ejemplo, en el caso a) En el párrafo dos hay una colisión porque se han aplicado dos clases con distinto atributo color, class="clase_rojo" y class="clase_azul", ya hemos dicho que la colisión se resuelve a favor de la clase_azul porque se definió detrás de la clase_rojo, sin embargo, la clase_rojo sí se aplica respecto al otro atributo que contiene, font-weight: bold (texto en negrita).

Por suerte, hay una herramienta que nos ayuda a ver las colisiones muy claramente, se trata del modo "inspector" de los navegadores, al que se accede pulsando CTRL + MAY + I, este modo nos muestra las reglas que se aplican al texto que tengamos seleccionado y muestra tachadas las colisiones no aplicadas. Por ejemplo, en la siguiente imagen, en el párrafo dos del que acabamos de hablar nos muestra cómo se le han aplicado la .clase_azul y la .clase_rojo, y vemos que el atributo color_rojo de esta última está tachado ya que no se ha aplicado por tener preferencia la .clase_azul.

Para practicar lo aprendido realiza el ejercicio CSS.Selectores