Наследование (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

all: initial | inherit | unset;
unset если свойство наследуется, то как у родителя, если нет — то по умолчанию
inherit как у родителя
initial по умолчанию

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

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

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

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

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

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

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

100%

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

<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

100%

<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>
inherit

<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

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

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

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

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

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

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

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

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

Я сам по себе
У меня есть родитель "raz0"
<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 позволяет сбросить все стили, включая те, что браузер задал для тега по умолчанию

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

<div>
не будет блочным
<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

Сводная таблица универсальных ключевых слов
unset если свойство наследуется, то как у родителя, если нет — то по умолчанию
пример
<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>
inherit как у родителя
пример
<style>
div {
  color: green;
  border: 1px solid red;
}
span {
  color: inherit;
  border: 1px solid inherit;
}
</style>

<div><span>пример</span></div>
initial по умолчанию
пример
<style>
div {
  color: green;
  border: 1px solid red;
}
span {
  color: initial;
  border: 1px solid initial;
}
</style>

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

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

в f t
наверх ↑

5 комментариев:

Анонимный
Здравствуйте!
Не подскажите почему так?
https://jsfiddle.net/og96q6x5/

Почему этот негодяй Н2 сдвигает жёлтый ДИВ в низ. Я вообще хотел без красного. Он жёлтый сдвинул. Я его ещё в один ДИВ так он сдвинул и жёлтый и красный.
Почему?
NMitra
Здравствуйте, насколько я поняла вас не устраивает схлопывание? Посмотрите http://shpargalkablog.ru/2011/03/svoistva-margin-padding.html#m-parent Там есть решения проблемы
Анонимный
Спасибо Вам. Эту пробелку я уже нарыл как решать это схлопывание. Или как у Вас или чистящим ДИВом.

Не у меня другое.
Вот получилось. Что и хотел.
Вроде получилось его усмирить с display:inline-block.
https://jsfiddle.net/og96q6x5/2/

Но вопрос остался. Разве находясь внутри ДИВа он не должен двигаться по этому диву. Никого не трогать?
И почему при display:inline margiņ-top: Не работает?
https://jsfiddle.net/og96q6x5/1/
Анонимный
Спасибо Нашёл!!!
vertical-align: с display:inline; и display:inline-block;

Даа. Как всё это забавно.
NMitra
И почему при display:inline margiņ-top не работает? - Потому что он не блочный, у него нет высоты height