Hervera
Open Menu
Serie de tutoriales con lo necesario para dominar CSS. En la tercera publicación se verán las maneras de modificar propiedades definidas previamente.

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.

Fotografía de portada de: unsplash-logo siamak djamei