Tutorial CSS parte 3: Sobre-escritura de propiedades en CSS
Sobre-escritura de propiedades en CSS
En CSS cuando varios selectores idénticos e igual de específicos modifican la misma propiedad siempre prevalecerá el último definido.
Esta
característica sirve para, por ejemplo, poder modificar las hojas de estilo de terceros, por ejemplo, Bootstrap,
Normalize o cualquier librería CSS que podamos importar a nuestro proyecto. También es una
característica que en conjunto con las MediaQueries nos permiten hacer los layouts responsivos o adaptables.
Especificidad de selectores
Cuando distintos selectores aplican a un mismo elemento, el navegador necesita saber, de alguna forma, que propiedad aplicar.
Por ejemplo, utilizando los siguientes selectoress:
/*A -*/ ul li a.product{color: red; background: pink;}
/*B -*/ #element .product{color:green; border: 1px solid #333;}
/*C -*/ .sales .product{color: blue; background: yellow;}
Y el siguiente código HTML:
<div id="element">
<ul class="sales">
<li>
<a class="product">Product 1</a>
</li>
</ul>
</div>
Todos los selectores encajan enlace <a></a> y todos los selectores modifican la propiedad color, por lo tanto, para saber cuál va a aplicar, se calcula el peso específico de cada uno y el que sea mayor es el que se aplica.
Para calcular el peso específico, usa la siguiente formula:
Peso específico CSS = (número de ids * 100) + (número de classes o pseudo clases) * 10 + (número de tags o pseudo elementos)
Parece complicado, pero es muy sencillo:
Selector | Número ids | Classes o pseudo classes | Tags o pseudo elementos | Total |
---|---|---|---|---|
A | 0 | 1 | 3 | 0*100 + 1 *10 + 3 = 13 |
B | 1 | 1 | 0 | 1*100 + 1 *10 + 0 = 110 |
C | 0 | 2 | 0 | 0*100 + 2 *10 + 0 = 20 |
De esta forma, cuando una propiedad esté definida en varios selectores que apliquen a un mismo elemento, se mirará cual tiene más peso específico para decidir cuál usar.
Por lo que al final el elemento quedará con los siguientes estilos:
color:green; border: 1px solid #333; background: yellow;
Con las últimas versiones de Visual Studio Code, calcular la especificidad
es muy sencillo, ya que si nos ponemos con el cursor encima de un selector CSS, nos aparece el cálculo
hecho.