inherit CSS значення

Ключове слово, яке повідомляє, що необхідно наслідувати значення властивості у батьківського елементу. Звісно, результат буде помітний лише в тому випадку, якщо у батька вказана властивість встановлена.

h1 намагається успадкувати значення кольору, яке він знаходить у елементі body.

Кожна CSS властивість може приймати, як значення, ключове слово inherit. Наприклад, ось так:

span {  
    font-size: inherit;  
}

Цим ми змушуємо певний елемент успадковувати вказане значення властивості від батьківського елемента. Якщо в CSS не інстальовано властивість для батьківського елемента, то він успадкує значення, обчислене від батька (яке може бути дефолтним або яким-небудь іншим, успадкованим від батьківського елемента).

Ключове слово inherit може стати в нагоді, якщо ви хочете привласнити одне і те ж значення групі дочірніх елементів для властивостей, які зазвичай не успадковуються. наприклад:

.block {  
  box-shadow:  0px 0px 11px rgba(0, 0, 0, 0.4);  
}  
.block div {  
    box-shadow: inherit;  
}

Тепер всі елементи <div> всередині основного елемента .block успадковують його значення властивості box-shadow.

правити

+ додати пораду чи нотатку

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	1	1	4	12	8

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	1

Приклади

+ запропонувати свій приклад у пісочниці

<div class="frame">
    <p class="block">Абзац успадкував колір і шрифт від контейнера.</p>
</div>
<p>Звичайний абзац поза контейнером.</p>

.frame {
    color: #d81b60;
    font-family: Georgia, serif;
}

.block {
    color: inherit;
    font-family: inherit;
}