Teoría
Teoría

Herencia explícita con inherit

A cualquier propiedad se le puede asignar el valor inherit.

Este valor hace que la propiedad tome el mismo valor que tiene en el elemento padre. Puedes usar inherit tanto para pedir explícitamente la herencia de una propiedad heredable como para heredar una propiedad que normalmente no se hereda.

Se escribe así:

p {
  background: inherit;
}

En este caso, la propiedad background de los elementos p tendrá el mismo valor que en sus elementos padres.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="es"> <head> <title>Herencia explícita con inherit</title> <meta charset="utf-8"> <link rel="stylesheet" href="setting.css"> <link rel="stylesheet" href="style.css"> </head> <body> <p>Primera lista</p> <ul class="first-list"> <li>Primer elemento de la lista</li> <li>Segundo elemento de la lista</li> <li>Tercer elemento de la lista</li> </ul> <p>Segunda lista</p> <ul class="second-list"> <li>Primer elemento de la lista</li> <li>Segundo elemento de la lista</li> <li>Tercer elemento de la lista</li> </ul> </body> </html>

CSS

body { font-family: "PT Sans", sans-serif; } ul { margin: 5px; padding: 5px; border: 1px solid #666666; list-style: none; }

ObjetivosRealizado

Para los elementos de la lista .second-list, asigna el valor inherit:

A la propiedad border.
A la propiedad margin.
A la propiedad padding.