Teoría
Teoría

Cálculo de la especificidad

Ya practicaste con la especificidad. Ahora vamos a ver cómo calcularla para los selectores que hemos estudiado.

Podemos representar la prioridad con cuatro grupos: a, b, c y d:

si el estilo está en el atributo style="...", entonces a=1; en caso contrario, a=0;
b es la cantidad de selectores de ID, los que empiezan con #;
c es la cantidad de clases, pseudoclases y selectores de atributo;
d es la cantidad de selectores de etiqueta y pseudoelementos.

El resultado suele abreviarse como un número. Por ejemplo, 0,1,0,0 se escribe como 100 y 0,0,1,0 como 10. Cuanto mayor sea la especificidad de un selector, mayor será su prioridad.

Aunque es práctica, esta notación numérica puede resultar engañosa. Recuerda que 0,1,10,0 no se convierte en 200 y que veinte selectores de etiqueta tienen menos prioridad que un solo selector de clase.

Calculemos la especificidad de nuestro ejemplo:

Selector	a, b, c, d	Número
span	0, 0, 0, 1	1
div .cat-in-box	0, 0, 1, 1	11
#floor .cat-in-box	0, 1, 1, 0	110
div span	0, 0, 0, 2	2
.cat-in-box	0, 0, 1, 0	10
#floor span	0, 1, 0, 1	101

Así vemos que el selector con mayor prioridad en nuestro ejemplo es #floor .cat-in-box.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="es"> <head> <title>Cálculo de la especificidad</title> <meta charset="utf-8"> <link rel="stylesheet" href="setting.css"> <link rel="stylesheet" href="style.css"> </head> <body> <ol> <li> <p>Calcula la especificidad del selector:</p> <pre>.text li.error span {}</pre> <p>Respuesta <input type="text" name="exercise_1"></p> </li> <li> <p>Calcula la especificidad del selector:</p> <pre>#wrapper .text #message p a {}</pre> <p>Respuesta <input type="text" name="exercise_2"></p> </li> <li> <p>Calcula la especificidad del selector:</p> <pre>#main .content a:hover {}</pre> <p>Respuesta <input type="text" name="exercise_3"></p> </li> </ol> </body> </html>

CSS

body { font-family: "PT Sans", sans-serif; } li { margin-bottom: 30px; } pre { max-width: 350px; padding: 5px 10px; border: 1px solid #e1e1e8; background-color: #f7f7f9; border-radius: 3px; } input[type="text"] { width: 50px; margin-left: 5px; padding: 3px; border: 1px solid #cccccc; font-family: "PT Sans", sans-serif; vertical-align: middle; border-radius: 5px; }

ObjetivosRealizado

Calcula la especificidad de los tres ejemplos e introduce las respuestas en los campos. No hace falta escribir los ceros iniciales.

La primera respuesta es correcta.
La segunda respuesta es correcta.
La tercera respuesta es correcta.