Teoría
Teoría

Prioridad de los selectores de ID

Como ya sabes, además de los selectores de clase, existen los selectores de id. Empiezan con el signo #.

HTML:

<div id="experiment-1" class="experiment">
  <p class="red blue">¿Azul o rojo?</p>
</div>

CSS:

#experiment-1 .blue {
  color: blue;
}
.experiment .red {
  color: red;
}

El valor del atributo id debe ser único en la página. Es decir, solo puede haber una etiqueta con un valor determinado de id.

Un selector de id está pensado para seleccionar un solo elemento. Además, en el cálculo de la especificidad, un selector de id tiene más peso que los selectores de etiqueta, de clase o las combinaciones de estos.

Cupcake y Rodolfo nos mostrarán cómo funciona.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="es"> <head> <title>Prioridad de los selectores de ID</title> <meta charset="utf-8"> <link rel="stylesheet" href="battle.css"> <style> #keks-vs-rudolf .to-keksik { /* Cupcake tiene un agarre de hierro */ margin-left: -120px; } </style> <link rel="stylesheet" href="style.css"> </head> <body> <h1>¿Quién se quedará con el pollo?</h1> <div id="keks-vs-rudolf" 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

/* Aumenta la especificidad del selector de esta regla para arrebatarle el pollo */ .battle .to-rudolf { margin-left: 120px; }

ObjetivosRealizado

Una vez más, Rodolfo debe recuperar lo suyo.

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