Наследование (inherit initial unset) | CSS

Наследование CSS-свойств

Большинство свойств не передают дочернему элементу свои значения от родителя

<div style="border: solid mediumaquamarine;">
    Мне дали рамку
    <div>Мне не дали рамку</div>
</div>

<div style="border: solid mediumaquamarine;">
    Мне дали рамку
    <div style="border: solid slateblue;">Мне дали рамку</div>
</div>

У некоторых значение по умолчанию подстраивается под родителя

<div style="border: solid mediumaquamarine; background: #E6FEDF;">
    Мой фон сделали бледно-зелёным
    <div style="border: solid slateblue;">Мой фон прозрачный и через него виден бледно-зелёный фон родителя</div>
</div>

И лишь немногие (см. список свойств CSS2, если в графе "Inherited" указано "yes") наследуют значение свойства от родителя

<div style="border: solid mediumaquamarine; color: red;">
    Меня сделали красным
    <div style="border: solid slateblue;">Я красный из-за наследования стилей</div>
</div>

Свойство, меняющее все стили CSS, кроме direction и unicode-bidi

Это те значения, которые можно применить к любому свойству CSS. Везде происходит сброс стиля браузера, в том числе у тегов input, progress и т.д.

CSS наследование стилей от родителя: inherit

Если предку и потомку нужно указать одинаковые значения свойства, то удобней для дальнейшего редактирования использовать inherit — достаточно будет изменить значение только у родителя.

inherit передаёт не конечное значение, а то, что указано в стилях родителя

Пример 1: в чём разница между width: inherit; и width: 100%;

<div style="width: 50%; border: solid mediumaquamarine;">
    <div style="width: 100%; background: #E6E2FF;">100%</div>
</div>

<div style="width: 50%; border: solid mediumaquamarine;">
    <div style="width: inherit; background: #E6E2FF;">inherit</div>
</div>

Пример 2: max-height: 100%; не работает

<div style="max-height: 3em; border: solid mediumaquamarine;">
    <div style="max-height: 100%; height: 4em; background: #E6E2FF;">100%</div>
</div>

<div style="max-height: 3em; border: solid mediumaquamarine;">
    <div style="max-height: inherit; height: 4em; background: #E6E2FF;">inherit</div>
</div>

Пример 3: как сделать дубликат стилей CSS родителя

<style>
#raz {
  position: relative;
  max-width: 15em;
  border: solid mediumaquamarine;
  background: #E6FEDF;
}
#raz div {
  all: inherit;  /* обязательно должен быть первым в списке */ 
  position: absolute;
  top: 1em;
}
</style>

<div id="raz">
    <div>У меня та же максимальная ширина, фон, рамка и другое, что у родителя</div>
</div>

Материал по теме: Скопировать стили CSS с родителя с помощью JavaScript

inherit переносит значение непосредственного родителя, а не определённого position

<div style="width: 100%; border: solid salmon; position: relative;">
    <div style="width: 50%; border: solid mediumaquamarine;">
        <div style="width: 100%; background: #E6E2FF; position: absolute;">100%</div>
    </div>
</div>

<div style="width: 100%; border: solid salmon; position: relative;">
    <div style="width: 50%; border: solid mediumaquamarine;">
        <div style="width: inherit; background: #E6E2FF; position: absolute;">inherit</div>
    </div>
</div>

Противопоставление: Взаимоденйствие overflow и position

Копируется всё, даже то, что не указано разработчиком в стилях у родителя

<div style="border: solid mediumaquamarine;">
    <span style="background: #E6E2FF;">без установленного display</span>
</div>

<div style="border: solid mediumaquamarine;">
    <span style="display: inherit; background: #E6E2FF;">inherit</span>
</div>

initial CSS: отменить наследование

Для того, чтобы узнать начальные значения свойств, которые зависят от браузера, таких как color и font-family, можно применить initial

Пример 1: запретить наследование свойства

<style>
.raz {
  color: red; /* наследуется */ 
  font-size: 200%; /* наследуется */ 
}
.raz * { /* для всех потомков */ 
  color: initial;
}
</style>

<div class="raz">
    color: <span>initial</span>;
</div>

Пример 2: убрать свойство для более узкого селектора

<style>
.raz {
  color: red; /* наследуется */ 
  font-size: 200%; /* наследуется */ 
}
.raz0 .raz {
  color: initial;
}
</style>

<div class="raz">Я сам по себе</div>
<div class="raz0">
    <div class="raz">У меня есть родитель "raz0"</div>
</div>

initial позволяет сбросить все стили, включая те, что браузер задал для тега по умолчанию

Пример: для сторонних виджетов отключить наследование стиля и стили, установленные браузером

<style>
.raz {
  color: red; /* наследуется */ 
  font-size: 200%; /* наследуется */ 
}
.raz * { /* для всех потомков */ 
  all: initial;
}
</style>

<div class="raz">
    &lt;div&gt; <div>не будет блочным</div>
</div>

Практический пример: кнопка превращается в поле, нажав на которое закрывается модальное окно

unset CSS: сбросить стиль браузера

Поведение стандартное, только все теги становятся обезличенными, словно их подстригли под одну гребёнку. То есть как и у initial, блочные элементы станут inline.

Пример: обнулить все возможные стили input

<style>
label {
  text-shadow: 1px 1px rgba(255,0,180,0.5);
}
input {
  all: unset;
}
</style>

<label>Изменить текст: <input type="text" value="делайте со мной что хотите"/></label>

Похожий эффект: Атрибут contenteditable

<style>
div {
  color: green;
  border: 1px solid red;
}
span {
  color: unset; /* наследуется */ 
  border: 1px solid unset; /* не наследуется, по умолчанию currentColor */ 
}

<!-- то же самое -->

div {
  color: green;
  border: 1px solid red;
}
span {
  border: 1px solid;
}
</style>

<div><span>пример</span></div>

<style>
div {
  color: green;
  border: 1px solid red;
}
span {
  color: inherit;
  border: 1px solid inherit;
}
</style>

<div><span>пример</span></div>

<style>
div {
  color: green;
  border: 1px solid red;
}
span {
  color: initial;
  border: 1px solid initial;
}
</style>

<div><span>пример</span></div>

Домашнее задание: в комментариях предложить свой пример использования значений inherit, initial и unset, а то у меня фантазия уже исчерпана :)