Cómo funciona 'unset' en CSS

El keyword unset en CSS sirve para restablecer el valor de una propiedad dependiendo de si es heredada o no:

• Si la propiedad se hereda por defecto, unset actúa como inherit y mantiene el valor heredado.
• Si la propiedad no se hereda, unset actúa como initial y restablece la propiedad a su valor por defecto del navegador.

Puede aplicarse a cualquier propiedad de CSS, incluyendo la propiedad abreviada all.

Unset en una propiedad heredable

La propiedad color es una propiedad heradable en CSS. Veamos qué sucede cuando usamos unset en un párrafo dentro de un div.

1<p>Este texto es rojo.</p>
2
3<div class="foo">
4  <p>Este texto también es rojo.</p>
5</div>
6
7<div class="bar">
8  <p>Este texto es verde (valor heredado por defecto).</p>
9</div>

1.foo {
2  color: blue;
3}
4
5.bar {
6  color: green;
7}
8
9p {
10  color: red;
11}
12
13.bar p {
14  color: unset;
15}

• El primer párrafo será rojo porque la regla p { color: red; } lo define así.
• El párrafo dentro de .foo también será rojo, ya que hereda el color de p.
• El párrafo dentro de .bar será verde, porque unset hace que color se herede, y .bar tiene color: green.

Unset en una propiedad no heredable

La propiedad border no se hereda en CSS. Veamos qué pasa si usamos unset en una regla de estilo.

1<p>Este texto tiene un borde rojo.</p>
2
3<div>
4  <p>Este texto también tiene un borde rojo.</p>
5</div>
6
7<div class="bar">
8  <p>Este texto tiene un borde negro (valor inicial por defecto).</p>
9</div>

1div {
2  border: 1px solid green;
3}
4
5p {
6  border: 1px solid red;
7}
8
9.bar p {
10  border-color: unset;
11}

• Todos los párrafos inicialmente tienen un borde rojo (border: 1px solid red).
• Los div tienen un borde verde, pero los p dentro de ellos siguen con borde rojo.
• En .bar p, el border-color se resetea a su valor inicial (negro), ya que unset actúa como initial para propiedades no heredadas.

Conclusión

El uso de unset puede ser útil cuando quieres asegurarte de que un elemento vuelva a su estado natural, sin especificar si debe heredarlo o reiniciarlo.

Recordá

Para propiedades heredadas, unset funciona como inherit. Para propiedades no heredadas, unset funciona como initial.