Teoría
Teoría

Orden de las reglas

Antes de estudiar reglas más complejas de la cascada, el cálculo de la especificidad y las prioridades, vamos a practicar con unos gatos que se disputan un pollo.

Veamos un ejemplo. Este código HTML contiene un párrafo con dos clases:

<p class="red blue">¿Azul o rojo?</p>

Y este código CSS contiene dos reglas para esas clases:

.blue {
  color: blue;
}

.red {
  color: red;
}

¿De qué color será el texto del párrafo? ¿Qué regla CSS tendrá mayor prioridad?

El texto será rojo: la segunda regla tiene mayor prioridad.

Esto ocurre porque los selectores de ambas reglas son del mismo tipo y tienen la misma especificidad. En ese caso, tiene mayor prioridad la regla que aparece después en el código CSS. En nuestro ejemplo, es la regla para la clase red.

En esta serie de ejercicios no puedes cambiar los valores de las propiedades CSS. Según el ejercicio, podrás cambiar los selectores o el orden de las reglas en el código.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="es"> <head> <title>Orden de las reglas</title> <meta charset="utf-8"> <link rel="stylesheet" href="battle.css"> <link rel="stylesheet" href="style.css"> </head> <body> <h1>¿Quién se quedará con el pollo?</h1> <div class="battle"> <div class="cat cat-keksik">Cupcake</div> <div class="cat cat-rudolf">Rodolfo</div> <div class="chicken to-keksik to-rudolf"></div> </div> </body> </html>

CSS

.to-keksik { margin-left: -120px; } .to-rudolf { margin-left: 120px; }

ObjetivosRealizado

Cambia el CSS para que Cupcake se quede con el pollo.

No puedes cambiar los valores de las propiedades ni los selectores CSS: el sistema lo detectará y no aceptará el resultado.