Teoría
Teoría

Especificidad de selectores descendientes

Ahora veamos cómo se comportan los selectores descendientes.

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

En CSS usamos un selector descendiente para la segunda regla:

p.blue {
  color: blue;
}

.experiment .red {
  color: red;
}

¿De qué color será el texto ahora?

Cupcake y Rodolfo nos ayudarán a descubrir qué selector es más específico.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="es"> <head> <title>Especificidad de selectores descendientes</title> <meta charset="utf-8"> <link rel="stylesheet" href="battle.css"> <style> .battle .to-rudolf { /* Rodolfo se aferra con más fuerza */ margin-left: 120px; } </style> <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

/* Usa un selector descendiente para aumentar la especificidad de esta regla y arrebatarle el pollo */ .to-keksik { margin-left: -120px; }

ObjetivosRealizado

El pollo debe volver a las patas de Cupcake.

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