Herencia

Lección 24 de 37 · 4 min

Algunas propiedades pasan de padres a hijos solas, y otras no. Saber cuáles, y cómo forzarlo con inherit, initial, unset y revert, ahorra muchas reglas repetidas.

Qué se hereda

Si un elemento no tiene valor para una propiedad que se hereda, toma el que calculó su padre. Por eso alcanza con poner la tipografía en body: todo el texto de la página la recibe.

Se heredan las de textocolor, font-family, font-size, font-weight, line-height, letter-spacing, text-align, white-space, visibility, cursor, list-style
No se heredan las de caja y de layoutmargin, padding, border, width, background, display, position, box-shadow, opacity, transform

La idea es que el texto se vea parejo, pero las cajas no se copien: si el borde se heredara, cada párrafo de una tarjeta tendría el suyo. Cada propiedad indica en su especificación si se hereda (en MDN figura como «Inherited: yes» o «no»).

Hay casos que confunden. opacity no se hereda, pero el hijo se ve transparente porque se pinta dentro del padre; con visibility: hidden en cambio el hijo hereda el valor y puede volver con visibility: visible. Y text-decoration no se hereda, pero el subrayado del padre se dibuja sobre el texto de los hijos.

inherit, initial, unset y revert

Cuatro palabras sirven en cualquier propiedad y cambian de dónde sale el valor:

inheritToma el valor del padre, aunque la propiedad no se herede.
initialEl valor inicial que define la especificación. Ojo: no es el del navegador. display: initial en un div da inline.
unsetSe comporta como inherit si la propiedad se hereda, y como initial si no.
revertDeshace tus estilos y vuelve a los del navegador. display: revert en un div da block.

Probalo con el enlace de la cartela. Sin regla, es azul aunque el resto del texto no: los enlaces no heredan el color porque el navegador les pone uno. El panel muestra el valor que calcula el navegador en cada caso:

Una sala blanca y vacía con una escalera angosta contra la pared

Fijate en unset y revert con color: el primero hereda el color de la cartela; el segundo vuelve al azul del navegador. Con border, que no se hereda, solo inherit copia el borde.

Hay una quinta: revert-layer deshace solo la capa actual y vuelve a lo que diga la capa anterior. Sirve dentro de @layer y está en los mismos navegadores que las capas (Chrome y Edge 99, Firefox 97, Safari 15.4).

La propiedad all

all aplica una de esas palabras a todas las propiedades a la vez, salvo direction, unicode-bidi y las variables. Sirve para arrancar de cero un elemento que trae muchos estilos, como un botón:

boton.css

1.boton-texto {
2  /* sin fondo, borde ni relleno; hereda tipografía y color */
3  all: unset;
4  cursor: pointer;
5}
6
7.boton-texto:focus-visible {
8  /* all: unset también borró el foco: hay que devolverlo */
9  outline: 2px solid;
10}

all: revert es más suave: devuelve el elemento a cómo lo dibuja el navegador, con su foco y todo.

currentColor

currentColor es el valor de color del propio elemento. Como color se hereda, un ícono o un borde que use currentColor sigue al texto que lo rodea sin repetir el color. Es el valor inicial de border-color y outline-color: border: 1px solid, sin color, ya lo usa.

aviso.css

1.aviso {
2  color: oklch(0.45 0.15 30);
3  border-inline-start: 3px solid;  /* mismo color que el texto */
4}
5
6.aviso svg {
7  fill: currentColor;              /* el ícono también */
8}

Variables y herencia

Las variables (--nombre) se heredan siempre: definidas en un contenedor, valen para todo lo de adentro, y un hijo puede redefinirlas para su parte del árbol. Si una variable no tiene que pasar a los hijos, registrala con @property e inherits: false:

tarjeta.css

1@property --relleno {
2  syntax: "<length>";
3  inherits: false;
4  initial-value: 0px;
5}
6
7.tarjeta { --relleno: 24px; padding: var(--relleno); }
8.tarjeta > .nota { padding: var(--relleno); }  /* 0px: no la hereda */

@property es Baseline desde julio de 2024 (Chrome y Edge 85, Safari 16.4, Firefox 128). Sin él, la variable se hereda igual que siempre.

Controles de formulario

input, button, select y textarea no heredan la tipografía: la hoja de estilos del navegador les pone una propia, más chica. Por eso un formulario puede verse con dos fuentes distintas. La solución es una línea:

font-size y primera familiamidiendo…

font: inherit en los controles

buscador.css

/* sin regla: los controles usan la letra del navegador */

buscador.html

<form>
  <label for="q">Artista, obra o año</label>
  <!-- el preflight ya pone font: inherit -->
  <input id="q" type="search" placeholder="Valdés">
  <button>Buscar</button>
</form>

font es un atajo: font: inherit hereda tamaño, familia, peso, estilo e interlineado de una vez. Casi todos los resets modernos lo traen.

En Tailwind

El preflight de Tailwind ya hace dos cosas de esta lección: los controles de formulario heredan font y color, y los enlaces heredan color y text-decoration. Para el resto:

CSS	Tailwind
color: inherit	text-inherit
color: currentColor	text-current
border-color: currentColor	border-current
fill: currentColor	fill-current
font-family: inherit	font-[inherit]
font: inherit	[font:inherit]
color: revert · border: inherit	[color:revert] · [border:inherit]
all: unset	[all:unset]

aviso.html

1<p class="text-red-700 border-s-3 border-current ps-3">
2  <svg class="size-4 fill-current">…</svg>
3  Sin servicio entre Medrano y Pasteur.
4  <!-- rojo: el preflight lo hereda -->
5  <a class="underline" href="/combinaciones">Ver combinaciones</a>
6</p>

Inheritance

Lesson 24 of 37 · 4 min

Some properties pass from parent to child on their own, and some don't. Knowing which, and how to force it with inherit, initial, unset and revert, saves a lot of repeated rules.

What inherits

When an element has no value for an inherited property, it takes the one its parent computed. That's why setting the font on body is enough: all the text on the page gets it.

Text properties inheritcolor, font-family, font-size, font-weight, line-height, letter-spacing, text-align, white-space, visibility, cursor, list-style
Box and layout properties don’tmargin, padding, border, width, background, display, position, box-shadow, opacity, transform

The point is consistent text without copied boxes: if borders inherited, every paragraph in a card would get one. Each property's spec says whether it inherits (MDN lists it as "Inherited: yes" or "no").

A few cases are confusing. opacity doesn't inherit, but the child looks transparent because it's painted inside the parent; visibility: hidden does inherit, and a child can come back with visibility: visible. And text-decoration doesn't inherit, but the parent's underline is drawn across its children's text.

inherit, initial, unset and revert

Four keywords work on any property and change where the value comes from:

inheritTakes the parent's value, even for a property that doesn't inherit.
initialThe initial value from the spec. Careful: not the browser's. display: initial on a div gives inline.
unsetActs as inherit if the property inherits, and as initial if it doesn't.
revertUndoes your styles and goes back to the browser's. display: revert on a div gives block.

Try them on the wall label's link. With no rule it's blue while the rest of the text isn't: links don't inherit color because the browser gives them one. The panel shows the value the browser computes each time:

An empty white room with a narrow staircase against the wall

Compare unset and revert on color: the first inherits the label's color, the second goes back to the browser's blue. On border, which doesn't inherit, only inherit copies the border.

There's a fifth one: revert-layer undoes only the current layer and falls back to whatever the previous layer says. It works inside @layer and shipped in the same browsers as layers (Chrome and Edge 99, Firefox 97, Safari 15.4).

The all property

all applies one of those keywords to every property at once, except direction, unicode-bidi and custom properties. It's handy for starting over on an element that comes with lots of styles, like a button:

button.css

1.text-button {
2  /* no background, border or padding; inherits font and color */
3  all: unset;
4  cursor: pointer;
5}
6
7.text-button:focus-visible {
8  /* all: unset removed the focus ring too: bring it back */
9  outline: 2px solid;
10}

all: revert is gentler: it puts the element back the way the browser draws it, focus ring included.

currentColor

currentColor is the element's own color value. Since color inherits, an icon or a border using currentColor follows the surrounding text without repeating the color. It's the initial value of border-color and outline-color: border: 1px solid, with no color, already uses it.

notice.css

1.notice {
2  color: oklch(0.45 0.15 30);
3  border-inline-start: 3px solid;  /* same color as the text */
4}
5
6.notice svg {
7  fill: currentColor;              /* the icon too */
8}

Custom properties and inheritance

Custom properties (--name) always inherit: set on a container, they apply to everything inside it, and a child can redefine them for its part of the tree. If one shouldn't reach the children, register it with @property and inherits: false:

card.css

1@property --gap {
2  syntax: "<length>";
3  inherits: false;
4  initial-value: 0px;
5}
6
7.card { --gap: 24px; padding: var(--gap); }
8.card > .note { padding: var(--gap); }  /* 0px: it doesn't inherit */

@property has been Baseline since July 2024 (Chrome and Edge 85, Safari 16.4, Firefox 128). Without it, the variable just inherits as usual.

Form controls

input, button, select and textarea don't inherit the font: the browser's stylesheet gives them a smaller one of their own. That's how a form ends up with two different typefaces. The fix is one line:

font-size and first familymeasuring…

font: inherit on the controls

search.css

/* no rule: the controls use the browser’s type */

search.html

<form>
  <label for="q">Artist, work or year</label>
  <!-- preflight already sets font: inherit -->
  <input id="q" type="search" placeholder="Valdés">
  <button>Search</button>
</form>

font is a shorthand: font: inherit inherits size, family, weight, style and line height in one go. Almost every modern reset includes it.

In Tailwind

Tailwind's preflight already does two things from this lesson: form controls inherit font and color, and links inherit color and text-decoration. For the rest:

CSS	Tailwind
color: inherit	text-inherit
color: currentColor	text-current
border-color: currentColor	border-current
fill: currentColor	fill-current
font-family: inherit	font-[inherit]
font: inherit	[font:inherit]
color: revert · border: inherit	[color:revert] · [border:inherit]
all: unset	[all:unset]

notice.html

1<p class="text-red-700 border-s-3 border-current ps-3">
2  <svg class="size-4 fill-current">…</svg>
3  No service between Medrano and Pasteur.
4  <!-- red: preflight inherits it -->
5  <a class="underline" href="/connections">See connections</a>
6</p>