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;}

<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:

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.