Teoría
Teoría

Especificidad de selectores combinados

Veamos un ejemplo un poco más complejo, con el mismo HTML:

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

Y un CSS algo diferente:

p.blue {
  color: blue;
}

.red {
  color: red;
}

En este caso, el texto del párrafo será azul, porque el selector p.blue es más específico que .red.

Una forma intuitiva de entender la especificidad en este ejemplo es la siguiente:

Un selector que restringe más la selección resulta más específico.

En nuestro ejemplo, .red selecciona cualquier etiqueta con esa clase, mientras que p.blue selecciona solo párrafos con la clase indicada. Vimos cómo combinar selectores de etiqueta y de clase en este ejercicio.

Observa que una de las reglas CSS está en el código HTML, que está bloqueado. Tendrás que superarla aumentando la especificidad de la otra regla.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="es"> <head> <title>Especificidad de selectores combinados</title> <meta charset="utf-8"> <link rel="stylesheet" href="battle.css"> <style> div.to-keksik { /* Cupcake refuerza su ventaja */ 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

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

ObjetivosRealizado

Ayuda a Rodolfo a ganar la revancha y recuperar su tesoro.

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